Css Box Shadow Not Truly Transparent?

This is a stack of 8 white box shadows, with a blue background gradient at the bottom and a white background elsewhere. By my logic a white box shadow on a white background should

Solution 1:

Instead of using 8 different shadows on one element, use the shadow spread property with a large size to get the effect you desire:

box-shadow: 0px0px35px20px#fff;

As you can see in this demonstration, you only need one shadow and the fourth property 20px enables you to spread the shadow out further from the edge of the element, creating the soft glow effect. Play with the settings to get what you desire.

Also, to better re-create the effect you have in your screenshot, you can use opacity: 0.5; to soften it even more. See the demo.

Hope that helps :)