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

1. box-shadow: horizontal offset vertical offset blur spread color;

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:

1. <style type="text/css">
2. img#greek-temple { width: 400px; height: 259px;
3. border: 15px solid #ffd;
4. -moz-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.3);
5. -webkit-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.3);
6. box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.3); }
7. </style>
9. <img src="temple-of-athena-aphaia.jpg" id=greek-temple;"
10. alt="Temple of Athena Aphaia, Aegina Island, Greece"
11. title="Temple of Athena Aphaia, Aegina Island, Greece" />

(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:

1. h3#inception-logo {
2. font-family: "Arial Black", Arial, sans-serif;
3. text-align: centre; letter-spacing: .3em; padding: 0 2em;
4. font-weight: 900; font-size: 55px; color: #fff;
5. text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
6. -moz-box-shadow: 0 0 12px rgba(0, 0, 0, 0.3) inset;
7. -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.3) inset;
8. box-shadow: 0 0 12px rgba(0, 0, 0, 0.3) inset; }