Text Shadows

The text-shadow property allows you to add one or more shadows to the text of any element. Unfortunately, it is not supported by IE and Microsoft seems happy enough to continue with their own propritary solution using the filter property DXImageTransform. 
h1 {
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#666,direction=45);
  }
but that's the last I'm going to say about that, because the effect is pretty ugly.

image of shadow filter in Internet Explorer

so from here on out, bear in mind that the extremely cool effects you see will only appear in non-IE browsers.

Text Shadows Syntax

Each shadow is specified with a horizontal offset, a vertical offset, a blur, and a color. For example, the following code produces a black shadow 2 pixels below and to the right of the text, with a blur radius of 3 pixels (the higher the blur value, the more blurred the shadow will be). 
text-shadow: 2px 2px 3px #000;

I'm text with a smooth shadow below

Using a negative vertical offset value you can place the shadow above the text: 
text-shadow: 2px -2px 3px #000;

I'm text with a smooth shadow above

By increasing the blur radius you can achieve a subtle glowing effect: 
color: #fff;  /* white text */
background: #000; /* black background */
text-shadow: 1px 1px 6px #fff;

I'm a subtle glowing text

You can make the whole text blurry by using the same color for text and shadow with no offset: 
color: #fff;
background: #666;
text-shadow: 0px 0px 3px#fff;

I'm also glowing but more blurry

You can add multiple shadows (as many as you want) to any block of text. To do so, you can add another text-shadow declaration to the rule, or just add a comma followed by another definition. 
text-shadow: rgba(51,51,51,.9) -1px -1px 3px,
             rgba(203,203,203,.9) 1px 1px 3px; /* second shadow */

I'm subtly glowing because of two shadows

You can create the popular embossed effect by using : 
text-shadow: -1px -1px white, 1px 1px #333

I'm embossed text

Many and more elaborate effects can be achieved through the text shadow property as shown on the following page.
Previous Next