CSS Text shadow

CSS 3 allows you to add drop shadows to text. The text-shadow property’s syntax doesn’t require vendor specific prefixes. That means this method for adding shadows behind text is finalized.

Browsers support for text-shadow

The syntax for adding shadow behind your text in CSS uses the new text-shadow property which is supported in most non IE browsers and will probably be supported by Internet Explorer 9 upwards. Firefox supports text-shadow it since version 3.5 onwards. Web-kit based have text-shadow (Chrome and Safari) since version 4.0. Opera has had it since version 9.6.

CSS3 text-shadow syntax

The text-shadow syntax is as follows:

text-shadow: 2px 3px 4px #333333;

To also add shadows for Internet Explorer visitors you can add something like the following:

filter: dropshadow(color=#333333, offx=2, offy=3)

but for ie8 of course an different filter was defined to keep things interesting.
To get something going in all browsers use something like this:

.shadow {
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

To see what this does just look at the headers in this article for which this property has been set.

As multiple shadows and colors for shadows can be set the text-shadow property can also be used to create glow effects and similar.

Text-shadow can be used for CSS based embossing

Embossing on dark Backgrounds

You want to stick with a -1px value for the y-axis and generally a slightly darker color that the background color itself.

text-shadow: 0px -1px 0px #374683;

Embossing on light Backgrounds:

Using 1px on the y-axis will work better on lighter backgrounds and using a lighter color.

text-shadow: 0px 1px 0px #ffffff;

Tags: css, CSS3, drop shadow