CSS中环形状的径向渐变

Question

I would like to create "ring" shape with specified thickness (in px) with radial gradient. Desired result is:

However, I don't know how to specify thickness in pixels and ensure that the color transition is smooth from green to transparent (not cut off). My current state is:

 div { background-image: radial-gradient(transparent, green, transparent); border-radius: 100%; height: 300px; width: 300px; }

 <div></div>

Is there any way to make it in HTML and CSS, without using canvas or svg ( fiddle ). I can't use the image, because I would like to render different widths and thicknesses of this shape.

Answer 1

You can play with CSS radial gradient in this site .

I achieved what you want, here's a demo . Just play around with the percentages to get the desired output.

 div { background: radial-gradient(circle, rgba(0,128,0,0) 50%, rgba(0,128,0,1) 60%, rgba(0,128,0,0) 70%); width: 300px; height: 300px; }

 <div></div>

Answer 2

 div { background-image: radial-gradient(transparent, transparent 100px, green 150px, transparent 200px, transparent); border-radius: 100%; height: 300px; width: 300px; }

 <div></div>

I've just used some random px values. Edit them as your requirements. Here is the Santax: radial-gradient(color width, color width, color width, ...) width can be set in px, rem, % or any css unit.

Answer 3

Here is a solution that will give you exactly the 50px of thickness you want. You can also make it a variable to adjust it like you want:

 .box { --t:50px; background: radial-gradient(farthest-side,transparent calc(100% - var(--t)), green, transparent 100%); display:inline-block; height: 250px; width: 250px; }

 <div class="box"></div> <div class="box" style="--t:80px;"></div> <div class="box" style="--t:100px"></div>

Answer 4

It's not a perfect replica but it's close enough. The trick is to use mask.

div {
  border-radius:50%;
  background:linear-gradient(green, green, green);
  -webkit-mask: radial-gradient(transparent 330px, #000 90px);
          mask: radial-gradient(transparent 330px, #000 90px);
}
div:before {
  content:"";
  display:block;
  padding-top:100%;
}

<div class="box"></div>