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