Shadow Text

The above shadow is coded <h1 style=”text-shadow: 5px 5px 4px #666;”>Shadow Text</h1>.

The text-shadow property takes 4 values — horizontal offset — vertical offset — shadow radius — shadow color. Positive values for the horizontal and vertical offsets move the shadow to the right and down. Negative values move the opposite direction.

Letterpress Effect

We can achieve a faux letterpress effect using the following:
<h1 style=”color: #222; text-shadow: 2px 2px 2px white;”>Letterpress Effect</h1>

The shadow (white) is two pixels below the type, two pixels to the right and has a blur radius of two pixels.

Letterpress Effect

Here is another variation:
<h1 style=”color: #222; text-shadow: 0px 2px 1px #ffffff;”>Letterpress Effect</h1>

The shadow (#ffffff = white) and appears 1 pixel below the type and has a blur radius of 1–which is not very blurry at all.

Letterpress Effect

Finally, we can chain several text-shadow renderings together to further the effect:
<h1 style=”color: teal; text-shadow: -1px -1px 2px #333, 1px 1px 1px #eeeeee;”>Letterpress Effect</h1>

Notice in the code, we are simply adding a comma between each set of shadow properties.

The key to this is using small values and hues that are in the same color range as the background.

There is a bunch of things you can do with text-shadow using different values and colors chained together to get other effects. Not very letterpress like, but impressive.

This code:
text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200
gives you this:

Fire Next Time