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