Back to Week 6 page »

Text Shadows

text-shadow Syntax

The text-shadow allows us to create shadow and highlight effects on our text.

text-shadow: 1px 1px 2px rgba(0,0,0, .6);

The property values represent:

  1. Horizontal offset: Specifies the horizontal offset of the shadow. A positive value draws a shadow that is offset to the right of the text, a negative length to the left.
  2. Vertical offset: Specifies the vertical offset of the shadow. A positive value offsets the shadow down, a negative one up.
  3. Blur Radius: Optionally specifies the blur radius. Negative values are not allowed. If the blur value is zero, the shadow’s edge is sharp. Otherwise, the larger the value, the more the shadow’s edge is blurred.
  4. Color: Specifies the color of the shadow. If the color is absent, the used color is taken from the ‘color’ property.

Definitions from W3C Specification

Basic Text Shadow

The Walking Dead

.box1 {
   text-shadow: 1px 1px 2px rgba(0,0,0, .6);
}

Basic Text Highlight

The Walking Dead

.demo2 {
   text-shadow: -1px -1px 1px white;
}

Multiple Shadows

You can combine drop shadows with transparency in the color to create more realistic effects.

The Walking Dead

.demo3 {
   text-shadow: 2px 2px 5px rgba(0,0,0, .6),
               -6px -6px 1px rgba(0, 123, 176, .4)
}

Text Shadows in the Wild

Using text shadows with subtlety can create a very nice effect on a web page. Here are some great examples:

Back to Week 6 page »