text-shadow can be applied to any text element, but should not, as a general rule, be applied to paragraphs; the property is best left to major headings and navigation bars.

We will explore the syntax, an example, and some common mistakes; 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 property is supported in IE10, but not previous versions.

The basic syntax is very straightforward:

text-shadow: horizontal offset vertical offset blur color;

An example would be the following CSS:

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

Applied to this markup:

<h1> ExcelsioR <span>Corporation</span></h1>

Tips for realistic text shadows

• 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 hsla works particularly well for this, as shadow colors based on these color models will adapt to changes in background colors.
• 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 article) but it is usually not recommended.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.