Using more than one color for CSS box shadow

Question

I'm attempting to use a dark shadow color on three sides of a div, and a light "glow" on one side -- essentially using two different colors for the CSS box shadow. So far the best solution I've come up with is to place a shadow on all sides but one, and use a second div with a glow, and a third div to hide the glow on all but one side with margins and overflow-hidden. I was just wondering if there might be a better (CSS-only) method than the one I'm implementing? Any ideas?

Demo here - http://swanflighthaven.com/css-shadow-glow.html

It doesn't look nearly as nice on a light background: http://swanflighthaven.com/css-shadow-glow2.html

#main {
    max-width:870px;
    min-width:610px;
    margin:0px auto;
    position:relative;
    top:40px;
    min-height:400px;
}
#maininside {
    position:relative;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    overflow:hidden;
    padding:0px 25px 25px 25px; 

}
#maininner {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    overflow:hidden;
    box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.80);
    -moz-box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.80);
    -webkit-box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.80);
    min-height:385px;
    padding:0px 15px 15px 15px;
    background:url(center.png) repeat;

}
#glow {
    position:absolute;
    height:50px;
    top:0px;
    box-shadow: 0 -10px 20px -5px #7b272c;
    -moz-box-shadow: 0 -10px 20px -5px #7b272c;
    -webkit-box-shadow: 0 -10px 20px -5px #7b272c;
    display: block;
    position:absolute;
    height:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
    margin-right:25px;
    margin-left:25px;
    margin-bottom:25px;
}



    <div id="main">
      <div id="glow">
      </div>
      <div id="maininside">
        <div id="maininner" ></div>
      </div>
    </div>

Answer 1

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

Answer 2

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/