Text Shadow in CSS3

2011-05-11

One of the new features in the upcoming CSS3 is text shadow. It allows you to put a shadow or blur around your text. This can be used to emphasize, highlight, or liven up the text, but it should not be used excessively, just for occasional details. Personally, I think it fits well with a black shadow behind white text against a relatively dark background. In your CSS, you use text-shadow to create the shadow. Here is an example:

.example {
	text-shadow: 1px 1px 0px #000000;
}

The first two values are the shadow’s offset relative to the text. The third value sets the width or spread of the blur. The last value determines the color. If you want to use Javascript to create a shadow, you can use the following code:

element.style.textShadow = "1px 1px 0px #000000";

CSS3 is still under development by W3C, but many browsers today have implemented support for most of the features. Firefox, Chrome, Safari and Opera support the use of text-shadow, but Internet Explorer does not supports it yet.