Text shadows

CSS level 3 has a property called 'text-shadow' to add a shadow to each letter of some text. In its simplest form, it looks something like this:

h3 {text-shadow: 0.1em 0.1em #333}

Which adds a dark gray (#333) shadow a little to the right (0.1em) and down (0.1em) relative to the normal text. The result looks like this:

(As of August 2005, not all browsers fully support 'text-shadow' yet. The above should work at least in Safari and Konqueror.)

Fuzzy text shadow

The simplest form of the 'text-shadow' property has two parts: a color (such as the #333 above) and an offset (0.1em 0.1em in the example above). This results in a sharp shadow at the indicated offset. But the offset can also be made fuzzy, resulting in a more or less blurred shadow.

The amount of fuzziness is given as another offset. Here are two lines, one with a little fuzziness (0.05em) and one with a lot (0.2em):

h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}

Readable white text

Shadows can make text more readable if the contrast between the foreground and the background is small. Here is an example of white text against a pale blue background, first without a shadow and then with:

h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}

Multiple shadows

You can also have more than one shadow. In general, that looks rather strange:

h3 {text-shadow: 0.2em 0.5em 0.1em #600,
      -0.3em 0.1em 0.1em #060,
      0.4em -0.3em 0.1em #006}

But with two well-placed dark and light shadows, the effect can be useful:

h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #333}

This is a bit dangerous, as you can see if your browser doesn't support 'text-shadow'. In fact, the colors of the background and the text in this example are almost the same (#CCCCCC and #D1D1D1), so without the shadows, there is barely any contrast.

Drawing letters as outlines

The two-shadows example of the previous version can be taken even further. With four shadows, letters can be given an outline:

h3 {text-shadow: -1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black}

It is not a perfect outline, and at this time (August 2005), the discussion is still open whether CSS should have a separate property (or perhaps a value for 'text-decoration') to make better outlines.

Neon glow

If you put a fuzzy shadow right behind the text, i.e., with zero offset, the effect is to create a glow around the letters. If the glow of a single shadow isn't intense enough, just repeat the same shadow a few times:

h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F}