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

Question

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

My bad. I have a round border, but I don't know how to make the radial gradient. I'm going to edit my question — DoctorC, Jun 02 '17 at 17:43

score 2 · Accepted Answer · edited Jun 02 '17 at 18:43

2

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>

edited Jun 02 '17 at 18:43

Asons

84,923
12
110
165

answered Jun 02 '17 at 18:09

Omri Luzon

3,975
6
20
29

Great. It works. Thanks. I tried with box-shadow before posting here but I couldn't make it work properly... – DoctorC Jun 02 '17 at 18:36
@LGSon That's great, Thank you. – Omri Luzon Jun 02 '17 at 18:48

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

1 Answers1