CSS3

CSS3 text-shadow

Learning JavaScript

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)

CSS3 outer solid text-shadow

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.

CSS3 outer blurred text-shadow

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:

CSS3 text-shadow outline effect

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:

CSS3 multiple text-shadows

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:

CSS3 text-shadow outset effect

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):

CSS3 text-shadow inset effect

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;
}