CSS text-shadow

The text-shadow CSS property adds one or more shadows to text. The shadows have to be positioned by setting an offset from the text and may also be colored and dimensioned. Shadows can be used to give appealing visuals, specially to large headings. When no blur is set they rather give a 3D or stroke effect depending on the offset.

pxptemvw...pxptemvw...#rgbahsla...
text-shadow: offset-x offset-y blur-radius? color?
text-shadow: 5px 5px 3px #565656;            /* to the right and below the text */ 
text-shadow: -3px -3px 5px rgb(15,20,15);    /* to the left and above the text */
text-shadow: 
        0 3px green,
        -3px 0 blue;                         /* multiple shadows, last one appears behind */

Several text shadows can be applied by comma separating sets of values. The color can be specified before or after the other values. Negative offsets are allowed. A negative offset-x places the shadow to the left and a negative offset-y places it above the text.

Browser Support: Full, except for IE9 and below

A Basic Shadow

Shadows are best applied using rgba color. The reason is that setting a transparency will possibly render a good-looking shadow even if the background is changed. This works specially well if the color is black or white, which is usual. Don't worry, rgba has wider support than text-shadow.

.shadowed {
font-size: 64px; color: orange; text-shadow: 0.05em 0.05em 0.025em rgba(0,0,0,0.2);
}

A Basic Shadow

Set the offset and blur in em units for the size and position of the shadow to scale with font-size.

3D text using shadows

Very good-looking 3D text is achieved using CSS text-shadow by applying several offsetted text-shadows. The shadows in the list are stacked, the last ones appearing behind.

3D Heading

.3d-heading {
font-size: 64px; color: #054b8c; text-shadow: 0 1px #4f8cc4, -1px 0 #a2d1fb, -1px 2px #4f8cc4, -2px 1px #a2d1fb, -2px 3px #4f8cc4, -3px 2px #a2d1fb, -3px 4px #4f8cc4, -4px 3px #a2d1fb, -4px 5px #4f8cc4, -5px 4px #a2d1fb;
}

Use the letter-spacing property if necessary to increase the separation between characters.

Inset Text Shadow

Creating an inset shadow is not possible with text-shadow alone. However, it can be simulated if the color of the text is semi-transparent.

It's a three layer trick. First give a black background to text using a shadow (0 0 0 #000). Then place a white shadow over it, followed by the semi-transparent layer of text color. Set the alpha transparency to zero to see what I mean.

.inset-shadow {
font-size: 48px; color: rgba(0,200,0,0.8); text-shadow: 1px 4px 4px white, 0 0 0 #000;
}

Inset Text Shadow

Source Fiddle

Blurry Text

Another great effect that text-shadow makes possible is blurry text. Make the text color transparent and add a blurry shadow. CSS actually draws a shadow behind the text and transparency will make it visible.

.blurry-text {
color: transparent; text-shadow: 0 0 3px black;
}

Blurry Text

Text Stroke

There's few support for CSS text-stroke and text-outline properties. Using text-shadow is the most compatible way to apply a text stroke.

.shadowed {
color: white; text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black; letter-spacing: 3px;
}

Stroked Text

The only way to place the stroke inside is to use the background-clip property as explained previously. Else, increase the letter-spacing to make up for the space the stroke eats.

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>