Is the CSS box shadow really transparent?

Question

This is a stack of eight shadows of a white box with a blue gradient background at the bottom and a white background elsewhere.

By my logic, the shadow of a white box on a white background should lead to white, but, obviously, a grayish bezel separates the white div from the rest of the white background. Css that generates this:

.content, .sidebar, .banner{ background-color: white; -webkit-box-shadow: 0px 0px 15px white, 0px 0px 30px white, 0px 0px 30px white, 0px 0px 30px white, 0px 0px 30px white, 0px 0px 30px white, 0px 0px 30px white, 0px 0px 30px white, 0px 0px 30px white, 0px 0px 30px white, } 

Naturally, there are fewer boxed shadows, it is much less pronounced, but still very noticeable on a pure white background. The purpose of this is that I want a region of white content to be inserted into the blue gradient, but with a white shadow gently “clearing” the region of the gradient around the regions of the content, as shown in this image

This image was from my layout made using adobe fireworks; You can see white shades of glitter on a white background, and also works great against a lower gradient. Any idea on what causes my CSS shadows (so far only tested in chrome) to behave badly or some other mechanism that I can use to achieve the effect I want?

Answer 1

Instead of using 8 different shadows for one element, use the shadow spread property with a larger size to get the desired effect:

  box-shadow: 0px 0px 35px 20px #fff; 

As you can see in this demo , you only need one shadow, and the fourth 20px property allows you to extend the shadow further from the edge of the element, creating a soft glow effect. Play with the settings to get what you want.

In addition, to better recreate the effect that you have in the screenshot, you can use opacity: 0.5; to soften it even more. See Demo.

Hope that helps :)