CSS3 box shadow

As text-shadow is to text, box-shadow is to most everything else. It even uses the same basic syntax:

Combined with the various transforms and properties in CSS3, box-shadow means that image processing in PhotoShop can be kept to a minimum, and CSS – which is far more easily modified and maintained, as well as very low in file size – can be used for most visual effects on pages.

box-shadow is still in draft status with the W3C; for that reason, Firefox and Safari only support it with vendor prefixes. (IE9 does not).

Remember that in HTML, everything is a box; even if you can’t see it, or if it is only implied. All images are boxes:

(I have applied the style as an id in this case only because doing so makes the CSS easier to read).

Setting horizontal or vertical offset to 0 and adding relatively high amount of blur provides a “glow“ effect; you can also use this to simulate ambient lighting effects. The same process can be applied to text-shadow. Further, box-shadow has an inset option, which provides an embossed appearance: