Can I have a round box shadow on a div of 0 width and height

Question

I am trying to create circular shapes with blurred edges. I was having success doing this by creating a div with 50% border-radius and then applying a box shadow. However, I am creating these shapes randomly with various box shadow settings and when the box shadows blur is very spread out, the color in the center is different from the div and a hard border appears. I tried setting the div to 0px width and height but then the rounded shape of the box shadow disappeared and it appeared square.

Is there a way to keep the round box shadow with a div of 0 width and height? or another method I should be using to achieve what i want?

Answer 1

You can consider radial-gradient to have a similar effect:

.box {
 width:100px;
 height:100px;
 border-radius:50%;
 background:radial-gradient(farthest-side,red ,transparent );
}

<div class="box">
</div>

That you can combine with a blur filter to increase the shadow effect:

.box {
 width:100px;
 height:100px;
 border-radius:50%;
 background:radial-gradient(farthest-side,red ,transparent );
 filter:blur(10px);
}

<div class="box">
</div>