cssbordercss-gradientscss-mask

css gradient border with transparency

I have this project where I need to draw a circle. I try to do this with a div which I give a border that draws a linear-gradiant. But this border also needs to be transparent. But I can't seem to get it to work. I get the gradient to work. But I have no idea how to add the transparency to this border.

This is the code I am using at this point:

.gradient-circle {
  --b: 5px; /* border width*/

  display: inline-block;
  margin: 10px;
  z-index: 0;

  width: 26rem;
  height: 26rem;
}

.gradient-circle:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--c, linear-gradient(to top, #5454d4, rgba(249, 116, 104)));
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--b) - 1px),
    #fff calc(100% - var(--b))
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--b) - 1px),
    #fff calc(100% - var(--b))
  );
  border-radius: 50%;
}

This is the border I am getting using the above CSS:

enter image description here

This is how the circle should look like:

enter image description here

Solution

  • Use 2 mask layer combined with mask-composite

    .gradient-circle {
  --b: 5px; /* border width*/

  display: inline-block;
  margin: 10px;
  z-index: 0;

  width: 26rem;
  height: 26rem;
  position:relative;
}

.gradient-circle:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--c, linear-gradient(to top, #5454d4, rgba(249, 116, 104)));
  -webkit-mask: 
  linear-gradient(45deg,#fff,transparent 80%),
  radial-gradient(
    farthest-side,
    transparent calc(100% - var(--b) - 1px),
    #fff calc(100% - var(--b))) content-box;
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
  border-radius: 50%;
  padding:1px;
}

body {
  background:#f2f2f2;
}
    <div class="gradient-circle"></div>