HTML – Text-shadow Property

Works in Safari, Opera, Firefox, Internet Explorer, Google Chrome and Konqueror.

The text-shadow declaration allows you to create a text shadow; i.e. a slightly moved, slightly blurred copy of a text. I assume it could be useful in serious designs, but I hope it won't be abused too much once it's become mainstream.

Example

It's supposed to look like this (Safari 1.3.2):

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.