A CSS3 feature that is sure to be abused on web pages as awareness and support grows, text-shadow can be applied to any text element. That being said, text-shadow should not, as a general rule, be applied to paragraphs; it is best left to major headings and navigation bars.

We will explore the syntax, an example, and some common mistakes made with text-shadow: for a full-blown and unusual use of the property, you may wish to read Horizontal Reverse-Focus Navigation With CSS3.

text-shadow is fully supported in all modern browsers, with no requirement for vendor prefixes. The obvious exception is IE: curiously, even IE9 does not, as if this writing, support the property.

The basic syntax is very straightforward:

1. text-shadow: horizontal offset vertical offset blur color;

An example would be the following CSS:

1. h1 { color: black; text-shadow: 0 4px 2px rgba(0, 0, 0, 0.3);
2. text-align: centre; letter-spacing: .1em; text-align: centre;
3. font-family: Highway, sans-serif;
4. background: #fffdff; width: 10em;
5. padding: .5em; border: 5px double #222;
6. background-image: url('assets/images/excelsior-logo.jpg');
7. background-repeat: no-repeat; background-position: centre; }
8. h1 span { text-transform: uppercase; display: block; font-size: .8em; }

Applied to this markup:

1. <h1> ExcelsioR <span>Corporation</span></h1>

You can see the result at the top of this article. A few points to note:

• A shadow is never solid black unless you are on stage or the surface of the moon: in the real world, ambient light, as well as that reflected from other sources, will cause a shadow to be somewhat transparent. Most neophyte designers make their drop-shadows far too solid and thick; in reality, a drop-shadow is usually subtle, with a transparency of 30% or so. rgba or hula works particularly well for this, as shadow colours based on these color models will adapt to changes in background colours.

• Similarly, shadows almost never have perfectly crisp edges. Adding a few pixels of blur will make the shadows far more realistic.

• Because we are typically using very small values, blur and offset are usually specified in pixels, although other CSS measurement systems are supported.

• Lightweight fonts will cast thin shadows. A letter casting a shadow bigger than the original font-size (i.e. by adding a great deal of blur to the shadow) implies that the projected light source is very close to the letter-form, which is not realistic in most cases. Increasing the weight and / or thickness of the font is usually a better route to take. Extra-black and gothic letter forms typically work particularly well.

• Living on the planet Earth as most of us do, we expect our most common light source (the Sun) to be above us, and projected shadows to be down. You can give negative values to the vertical offset of text-shadow, but doing so tends to produce the flashlight-held-under-the-chin-effect of spooky camp trips.

• It is possible to supply multiple text-shadows to an element (demonstrated in the aforementioned Horizontal Reverse-Focus Navigation With CSS3 article) but it is usually not recommended.