title: CSS box shadow not truly transparent?
body: <p><img src="https://i.stack.imgur.com/GKIMC.png" alt="enter image description here"></p>
  
  <p>This is a stack of 8 white box shadows, with a blue background gradient at the bottom and a white background elsewhere.</p>
  
  <p>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:</p>
  
  <pre><code>.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,
  }
  </code></pre>
  
  <p>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</p>
  
  <p><img src="https://i.stack.imgur.com/qIJUV.png" alt="enter image description here"></p>
  
  <p>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?</p>