box-shadow

box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread distance] [shadow color]

• box-shadow demos
• box-shadow demo 01
• box-shadow demo 02
• box-shadow demo 03
• box-shadow demo 04

#shadow {
     /* most common uses of box shadow */
     -moz-box-shadow: 3px 3px 5px #333;     /* firefox */
     -webkit-box-shadow: -3px -3px 5px #333;    /* safari/chrome */
     box-shadow: 3px 5px 5px #333;              /* ie9, future proofing for whatever browser that support this arrtibute */
 
     /* with rgba channel */
     box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.5);     /* 50% translucency */        
 
     /* with spread distance channel */
     box-shadow: 3px 5px 5px 10px rgba(0, 0, 0, 0.5);     /* 50% translucency */   
}

Also, except outer shadow, we can also make inner shadow by adding additional attribute to the box-shadow properties. This apply to -moz- and -webkit- as well.

#shadow { box-shadow: inset 3px 3px 5px #333; }

Okay, this is a little more advanced, we are allow to use multiple shadows as well. We can apply 5 layers of shadows of different styles to a box but separating each set of the attributes with a comma. It looks confusing but it actually really straight forward.

    box-shadow: 0 0 10px 5px black, 20px -20px 10px red, 20px 20px 10px yellow, -20px 20px 10px blue, -20px -20px 10px green;