Back CSS

Quick Tips for CSS3 Box Shadow

WRITTEN BY ON 14 Jan 2011
16,518 VIEWS • SHARES
0 comments

One of my favorite features in CSS3 - Box Shadow. Voted as best feature in CSS3.info. I have been using it for my personal projects such as designshovel.com and queness.com, but for commercial websites, we still have to style it up with images. However, it's about the right time to know how it works! I have written this quick note as a quick reference.

CSS

The most common use of box shadow. The syntax:

box-shadow: [Horizontal offset] [Vertical offset] [Blur radius] [Spread distance] [Shadow Color]

We can use rgba(0,0,0,0) for the color, which support alpha channel (transparency).

#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 */	
}

CSS

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;				
}

CSS

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.

#shadow {
    box-shadow: 0 0 10px 5px black, 20px -20px 10px red, 20px 20px 10px yellow, -20px 20px 10px blue, -20px -20px 10px green;
}
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.