You don’t have to limit yourself to a single shadow—text-shadow’s syntax
supports adding multiple shadows to a text node. Just supply extra values to
the property, using commas to separate them, like so:
E { text-shadow: value, value, value; }
The CSS for these examples is shown here. The first example has a class
of one, and the second has a class of two. Note that I’ve indented them for clarity.
.one {
text-shadow:
0 -2px 3px #FFF,
0 -4px 3px #AAA,
0 -6px 6px #666,
0 -8px 9px #000;
}
.two {
color: #FFF;
text-shadow:
0 2px rgba(0,0,0,0.4),
0 4px rgba(0,0,0,0.4),
0 6px rgba(0,0,0,0.4),
0 8px 0 rgba(0,0,0,0.4);
}
I’ve kept the x-offset at 0 while increasing the y-offset’s
negative value from –2px to –8px. The blur-radius increases from 3px to 9px,
and the color gets gradually darker, creating a ghostly pale outline behind
the characters, which becomes a darker shadow as it gets further from the
characters.
In the second example, the x-offset also remains consistent, but this time
the y-offset increases its value positively. Because the blur-radius isn’t specified,
it stays at zero. Here I’ve used the rgba() color function
so the color stays the same but is partially transparent, creating
an overlapping effect.
Although the value changes are fairly small, the visual difference between
the two elements is quite profound.