CODEWITHSUNDEEP
htmlcss
Li Haoyi
Li Haoyi

Reputation: 15802

CSS box shadow not truly transparent?

enter image description here

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

enter image description here

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?

Upvotes: 4

Views: 3055

Answers (1)

Kyle
Kyle

Reputation: 67194

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 :)

Upvotes: 5

Related Questions