Using more than one color for CSS box shadow
try negative spread values in the box-shadow css
Instead of creating the second div with the fancy margins and the hiding, try to play around with a negative spread value. It reduces the bleeding on the sides that you don't want your shadow to show up on. Play around with the example on my jsfiddle, set the spread to 0, -10, -5... you'll get the hang of it quick.
#glow {
/* x y blur spread color */
box-shadow: /* ie */
0px -10px 15px -6px rgba(255,000,000,0.7), /* top - THE RED SHADOW */
0px 5px 15px 0px rgba(000,000,000,0.3), /* bottom */
5px 0px 15px 0px rgba(000,000,000,0.3), /* right */
-5px 0px 15px 0px rgba(000,000,000,0.3); /* left */
-webkit-box-shadow:
0px -10px 15px -7px rgba(000,255,000,0.7), /* top - THE RED SHADOW */
0px 5px 15px 0px rgba(000,000,000,0.3), /* bottom */
5px 0px 15px 0px rgba(000,000,000,0.3), /* right */
-5px 0px 15px 0px rgba(000,000,000,0.3); /* left */
-moz-box-shadow:
0px -9px 10px -8px rgba(000,000,255,0.9), /* top - THE RED SHADOW */
0px 5px 10px 0px rgba(000,000,000,0.3), /* bottom */
5px 0px 10px 0px rgba(000,000,000,0.3), /* right */
-5px 0px 10px 0px rgba(000,000,000,0.3); /* left */
}
body {
padding: 10%;
background-color: #fefefe;
}
div {
height: 300px;
width: 300px;
margin: 0px auto;
border-radius: 2pt;
border: 1px solid rgba(0,0,0,0.8);
background-color: #fefefe;
}<div id="glow"></div>I had to play around with the properties a bit to get them to look similar in the different browsers. Mozilla/FF was the biggest pain. Look at how much the values differ... it's kind of a tedious game of cat and mouse off-setting the blur with spread...
- box-shadow is used in IE.
- webkit is used in Chrome.
- moz is used in Firefox.
http://jsfiddle.net/CoryDanielson/hSCFw/
You can just write multiple shadows, comma separated:
{
box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.80), 0 -10px 20px -5px #7b272c;
}
See https://developer.mozilla.org/En/CSS/Box-shadow