Search code examples
cssbordergradientradial-gradientsradial

How to make a round frame with radial gradient with CSS3?

I need to create a round frame around a transparent center. The frame has a radial gradient from inner to outer border.

The round div is easy with border-radius 50%.

The problem is adding a radial gradient to the border. I tried with border-image, border-color, box-shadow, radial-gradient without any success, while with background-image I didn't manage to have the transparent center.

Any suggestions?

Thanks, Enrico

Solution

  • You can use box-shadow

    .radial-thinggy {
  width: 50px;
  height: 50px;
  margin: 80px;
  background-color: transparent;
  border-radius: 50%;
  box-shadow: 0 0 10px 10px rgba(255,69,0,1),
              0 0 20px 20px rgba(255,140,0,1),
              0 0 30px 30px rgba(255,255,0,1);
 }

body {
  background-color: cornflowerblue;
}
    <div class="radial-thinggy"></div>