Radial gradient in shape of ring in 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>