css gradient border with transparency

Question

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:

This is how the circle should look like:

Temani Afif · Accepted Answer · 2020-12-16 12:54:45Z

2

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>

edited Dec 16, 2020 at 12:54

answered Dec 16, 2020 at 12:43

Temani Afif

280k30 gold badges379 silver badges504 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stephen Over a year ago

Is there a way to remove the tiny line at the top right of the circle? Thanks for the solution. This helped a lot!

Collectives™ on Stack Overflow

css gradient border with transparency

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related