CSS Text Effects

More Text Shadows

Here are some demonstations of the kinds of effects that can be achieved with the text-shadow property.

The vintage retro effect is made up of two text shadows, but the first is set to the same colour as the background in order to give the impression that the second shadow (the thin dark grey one) is offset to the bottom right. Remember to make sure your first shadow colour is set to the the colour as your page background, and the text and second shadow also both use the same colour.

text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;

The neon text effect is made up of 8 levels of shading. The base text is given a white fill, then each of the 8 text-shadow values are given larger and larger blur amounts while also getting darker. This blends between a vivid white inner glow and the large purple outer aura. The inset or letterpress style text effect is one of the more common uses of text-shadow. The shadow is offset on the Y-axis by a tiny amount to give the impression of a subtle highlight. On dark backgrounds offset the shadow underneath the text with a light colour, whereas on light backgrounds offset to the top of the text with a darker shadow colour.

text-shadow: 0px 2px 3px #666;

The anaglyphic text effect recreates the cool effect used on old 3D images. The effect is recreated with CSS using a mix of text-shadow and RGBa colouring. Using RGBa on the text and the shadow allows the alpha channel to be set to 50% transparency so the underlying text is visible through the shadow.

text-shadow: 8px 8px 0 rgba(255,0,180,0.5);

The fire text effect is another style that uses multiple levels of shading. Each shadow is offset in different directions, uses various blur settings and blends a range of warm colours to create the impression of a flame. These colours span from bright whites through to yellows, oranges and darker amber tones.