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

Tags:

Css