CSS3 text-shadow

Following on from my post on CSS3 box-shadow, we can also add shadows to text which will follow the shapes of the characters, not just outline the text element.

Offset shadow (solid)

View demo

The markup

h1 {
    -webkit-text-shadow: 3px 3px 0 #999;
    -moz-text-shadow: 3px 3px 0 #999;
    text-shadow: 3px 3px 0 #999;
}

This markup would produce a solid outer shadow on an h1 heading, with the shadow offset 2 pixels from the left and 2 pixels from the top of the the element and no blur. The meanings of the three numbers are as follows:

1. Horizontal offset
2. Vertical offset
3. Blur distance

Offset shadow (blurred)

This example has a 2 pixel blur applied.

View demo

The markup

h1 {
    -webkit-text-shadow: 3px 3px 2px #999;
    -moz-text-shadow: 3px 3px 2px #999;
    text-shadow: 3px 3px 2px #999;
}

Outlined text

We can make the text look like it has an outline by adding four shadows, each one offset slightly from one of the sides:

View demo

The markup

h1 {
    -webkit-text-shadow: -1px 0 1px #000, 1px 0 1px #000, 0 -1px 1px #000, 0 1px 1px #000;
    -moz-text-shadow: -1px 0 1px #000, 1px 0 1px #000, 0 -1px 1px #000, 0 1px 1px #000;
    text-shadow: -1px 0 1px #000, 1px 0 1px #000, 0 -1px 1px #000, 0 1px 1px #000;
}

Multiple shadows

We can apply multiple shadows to a text element to create various effects. Here is an example using three different colours at various placements:

View demo

The markup

h1 {
    -webkit-text-shadow: 12px 12px 2px #f0c, 30px -3px 2px #f90, 6px -10px 2px #9f3;
    -moz-text-shadow: 12px 12px 2px #f0c, 30px -3px 2px #f90, 6px -10px 2px #9f3;
    text-shadow: 12px 12px 2px #f0c, 30px -3px 2px #f90, 6px -10px 2px #9f3;
}

Multiple shadows: outset effect

We can use multiple shadows to make the text looks like it has some relief to it. Here, we use two shadows; a lighter coloured slightly offset shadow at the top of the text, and another darker coloured one below:

View demo

The markup

h1 {
    -webkit-text-shadow: -1px -1px #ffa2bc, 1px 1px #8a0030;
    -moz-text-shadow: -1px -1px #ffa2bc, 1px 1px #8a0030;
    text-shadow: -1px -1px #ffa2bc, 1px 1px #8a0030;
}

Multiple shadows: inset effect

Similarly, we can make the text look like it is inset into the background by reversing the shadows from the example above (darker colour on top, lighter colour on the bottom):

View demo

The markup

h1 {
    -webkit-text-shadow: -1px -1px #8a0030, 1px 1px #ffa2bc;
    -moz-text-shadow: -1px -1px #8a0030, 1px 1px #ffa2bc;
    text-shadow: -1px -1px #8a0030, 1px 1px #ffa2bc;
}