text-shadow

Back to the index.

The text-shadow declaration allows you to create a text shadow; i.e. a slightly moved, slightly blurred copy of a text.

Example

The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown.

The example makes clear text-shadow should be used moderately.

Syntax

p.test {
	text-shadow: #6374AB 20px -12px 2px;
}

As you see text-shadow accepts four values:

  1. The color of the text-shadow (#6374AB)
  2. The X-coordinate of the text-shadow (20px), relative to the text
  3. The Y-coordinate of the text-shadow (-12px), relative to the text
  4. The blur radius of the text-shadow (2px), which means the amount of space the shadowtext is 'stretched', causing a blur effect. 0 means: no blur. Don't set this value too high, the shadowtext quickly becomes illegible.