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>