Text Shadow

Text shadow is a CSS2 property that - like @font-face - has taken a long time to be supported by browsers. Modern versions of Firefox, Safari, Chrome and Opera all support text-shadow. No versions of Internet Explorer support text-shadow at present and it is uncertain if this will change with IE9. Similar effects to text-shadow can be achieved in IE using the propriety glow and blur filters, however, unless these filters are carefully used they can make the text less readable and are not recommended.

Below are some examples of my favourite text-shadow effects.

Letterpress

/* Dark text on dark background with vertical offset and blur */
text-shadow:0px 2px 3px #555;

Letterpress effect using vertical offset and blur

Mulitple shadows for an embossed/indent effect

/* Embossed */
text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px 0 #666, -1px -1px 0 #FFF;

/* Indented */
text-shadow: -1px -1px 0 #666, 1px 1px 0 #FFF;

Embossed text using multiple text-shadows

Indented text using multiple text-shadows

Engraved text

/* Light text on a dark background */
text-shadow: 0px -1px 0px #333333;

/* Dark text on a light background */
text-shadow: 0px 1px 0px #ebebeb;

Engraved text - great for buttons!