That looks good now.
By the way you could also use a single gradient with more color stops:
linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(0,0,0,0.5))
The space around the circle is transparent and not white. That makes the
drop-shadow() work. From the article (alpha mask means “everything that is not transparent”):
A drop shadow is effectively a blurred, offset version of the input image’s alpha mask, drawn in a specific color and composited below the image.
The spread radius defines how big the shadow is and the first two values define how far to the right and down the shadow shall be moved (the offset).
To test the effect we can start with
box-shadow: 5px 5px 5px 5px black; in your code and then change every value to
50px one after the other. After each step observe how the shadow changes until you arrive at
box-shadow: 50px 50px 50px 50px black;. This should make it a bit clearer.
I hope that helps.