CSS3 Text Shadows

CSS3 throws its full weight behind text shadows, which as the name suggests,
lets you add shadows to regular text on the page. And with support for
multiple shadows simultaneously applied to the same text, CSS
text shadows can produce some stunning textual effects without images. The
following is the syntax for CSS3 text shadows:

text-shadow: <offsetx> <offsety> <blur-radius>* <color>*

Whereby:

offsetx: The horizontal offset of the shadow (in any valid CSS unit)
relative to the text. A negative value places the shadow to the left of the
text.

offsety: The vertical offset of the shadow (in any valid CSS length
unit) relative to the text. A negative value places the shadow to the top of
the text.

blur-radius*: Optional value to set the strength of the blue (in any
valid CSS length unit). Defaults to 0 if not specified. A large blur-radius
value

color*: Optional value to set the color of the shadow. The value can be
defined either at the start or very end of text-shadow. Defaults to the UI
color if not specified.

Note: Values with asterisks following them (*) denote they are optional.

Here are a couple of very basic examples:

Basic Shadow:

Dynamic Drive

text-shadow: 5px 5px 0 #959595;

Blurred Shadow:

Dynamic Drive

text-shadow: 5px 5px 7px #959595;

Shadow with text color set to match closely the document's background
color:

This example sets the color of the text to match closely the document
background's color (white in this case), causing the shadow to define the outer
edges of the text.

Dynamic Drive

color: #f2f2f2;
text-shadow: 5px 5px 3px #414141;

Inset (aka Letterpress) Text Shadow:

This example sets out to create inset text, or text that appears slightly
pressed into the background. There are a few ways to achieve the look, but one
ways is to define just a y shadow offset (leaving the x shadow offset to 0)
while specifying a shadow color that's lighter than the text's font color.

Dynamic Drive

.inset{
text-shadow: 0 -2px 1px #8a8a8a;
}

Here's a more dramatic example done against a dark background:

Dynamic Drive

background:#494949;
color:black;
text-shadow: 0 1px 2px #8a8a8a;

Multiple, Simultaneous text Shadows

Multiple text shadows can be applied to the same element simultaneously,
which can make for some interesting effects. To add multiple text shadows to an
element, just separate each text shadow definition with a comma within the same
text-shadow property, for example:

Dynamic Drive

text-shadow: 5px 5px 0 red, -5px -5px 0 orange;

The point of the above example is just to highlight how two shadows (or more)
can be simultaneously added to a text element, each with its own offsets and
color. With that said, lets see a couple of more compelling multiple text shadow
examples.

3D looking Text Shadow:

In this example, multiple shadows of the same color are added to a text
element, each shadow offset a few pixels more compared to the previous. This
creates the illusion of 3D looking text:

Dynamic Drive

Notice how the very first shadow's color is set to black, to give the text a
nice outline.

Glowing Text Shadow:

You can create "glowing text" by using multiple text shadows that do NOT
offset at all from the foreground text, essentially hiding behind the text. By
gradually increasing the blur strength of each compounding shadow plus darken
its color, you create the "glow" effect: