cssradial-gradients

Radial gradient in shape of ring in CSS

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

enter image description here

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.

Solution

  • 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>