title: Using more than one color for CSS box shadow
body: <p>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?</p>
  
  <p>Demo here - <a href="http://swanflighthaven.com/css-shadow-glow.html">http://swanflighthaven.com/css-shadow-glow.html</a></p>
  
  <p>It doesn't look nearly as nice on a light background:
  <a href="http://swanflighthaven.com/css-shadow-glow2.html">http://swanflighthaven.com/css-shadow-glow2.html</a></p>
  
  <pre><code>#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;
  }
  
  
  
      &lt;div id="main"&gt;
        &lt;div id="glow"&gt;
        &lt;/div&gt;
        &lt;div id="maininside"&gt;
          &lt;div id="maininner" &gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>