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, while the dog never reacted because he was so very lazy.

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.