CSS3: pseudo 3D text using text-shadow property

The following article demonstrates how a simple text-shadow CSS property with specified values can make an illusion of a 3D text.

Initially, text-shadow CSS property is used to attach one or more shadows to text. The property can accept a comma-separated list of shadows, each specified by 2 or 3 length values and an optional color.

Here is syntax:

text-shadow: h-shadow v-shadow blur color;

Where:

• h-shadow - horizontal position of shadow (required);
• v-shadow - vertical position of shadow (required);
• blur - blur distance (optional);
• color - color of shadow (optional).

Any text in HTML has two dimensions set by default. To add the third one, text-shadow CSS property can be used. Actually it doesn't add third dimension, but only an illusion of depth which makes the text look as if it has this third dimension.

The illusion of text depth is achieved by adding five shadows where each shadow moves away 1 pixel from the previous shadow position in the same direction starting from the edges of the characters. Also to each shadow the identical color must be set which should be a bit darker compared to the text color. That's it, that's the whole trick!

text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #CCCCCC, 0 3px 0 #CCCCCC, 0 4px 0 #CCCCCC, 0 5px 0 #CCCCCC;

Live demo

There are only two important things you need to known in order to change the appearance of the text:

1. Direction of text depth. It can be changed by first two values (h-shadow, v-shadow) in text-shadow CSS property;
2. Color of text depth. It can be changed by fourth value. Color must be the identical for all the shadows.

Let's change it a little bit! In the example above, direction of text depth was set by increasing the value for vertical position of the shadow, now we are also going to increase the value for horizontal position of the shadow.

text-shadow: 1px 1px 0 #CCCCCC, 2px 2px 0 #CCCCCC, 3px 3px 0 #CCCCCC, 4px 4px 0 #CCCCCC, 5px 5px 0 #CCCCCC;

Live demo