CSS box shadow not truly transparent?

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

Up vote 4 down vote favorite share g+ share fb share tw.

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 result in white, but there is clearly a greyish rim dividing the white div from the rest of the white background. The css that generates this is: .

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, fewer box shadows, it is much less pronounced, but still very noticable on a pure white background.

The purpose of this is I want the white content area to stick into the blue gradient, but with the white glow shadow softly "clearing" an area of gradient around the content areas, as is shown in this image This image was from my mockup made using adobe fireworks; you can see the white glow-shadow blends into the white background perfectly, and also works very nicely against the bottom gradient. Any idea what is causing my CSS drop shadows (so far only tested in chrome) to behave badly, or any other mechanism I can use to achieve the effect I want? Html css css3 box-shadow link|improve this question asked Oct 29 '11 at 4:48Li Haoyi1,064117 81% accept rate.

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: 0px 0px 35px 20px #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 :).

– Li Haoyi Oct 29 '11 at 21:54 I have absolutely no idea. But then it wasn't really designed for people to stack up 8 shadows :) Glad it helped :) – Kyle Sevenoaks Oct 29 '11 at 22:04.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.