Div with radius, transparent background, and gradient border

Question

i trying to create div like this picture:

background - transparent radius - 8px gradient color for border

and i trying to do this with this code:

body {
  background: #000;
}
.avatar {
    width: 180px;
    height: 180px;
    border-radius: 9999px;
    border: transparent solid 8px;
    background: linear-gradient(#fff 0 0) padding-box,
    linear-gradient(to right, #11bbfe, #8c41fb) border-box;
    border-color: transparent;
}

<div class="avatar"></div>

but with this code the background are #fff and not transparent, if i will change

linear-gradient(#fff 0 0)

to

linear-gradient(transparent 0 0)

the background will be the gradient and not transparent

how can i do that? tnx

Please post it with runnable code in fiddle or stackoverflow code editor — Santhosh Kumar, Apr 20 '22 at 07:06

score 1 · Answer 1 · answered Apr 20 '22 at 07:51

changed background color to gradient, so you can see the tranparity. With the padding, you can change the thiccness of the border.

body {
  background: linear-gradient(to top, white, black);
}

.avatar {
  padding: 10px;
  display: inline-block;
  position: relative;
  z-index: 0;
}
.avatar:before {
  width: 180px;
  aspect-ratio: 1;
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  padding: 8px;
  border-radius: 100%;
  background: linear-gradient(to right, #11bbfe, #8c41fb);
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
          mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

<div class="avatar"></div>

Nick Vu · Answer 2 · 2022-04-20T09:24:05.830

0

You can use -webkit-mask to add a border overlay for the circle

body {
  background: #000;
}

.avatar {
  width: 180px;
  height: 180px;
  position: relative;
}

.avatar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 9999px;
  padding: 10px;
  background: linear-gradient(to right, #11bbfe, #8c41fb);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
}

<div class="avatar"></div>

edited Apr 20 '22 at 09:24

answered Apr 20 '22 at 07:49

Nick Vu

14,512
4
21
31

Why would you need the prefixed version of mask for this? – cloned Apr 20 '22 at 09:16
Unfortunately, this feature does not fully support all browsers, `webkit` is to help browsers recognize it as Webkit's styles (not all browsers' styles) @cloned – Nick Vu Apr 20 '22 at 09:29

Div with radius, transparent background, and gradient border

2 Answers2