The CSS3 text-shadow property is a great way to give a heading or title a little extra visual weight on a page. But did you know that you can simulate all kinds of Photoshop filter-like effects with it as well?

What makes many of these effects possible is the fact that you can stack multiple shadows within the same text-shadow property, like so:

While the above example is crude, with a little more finesse we can coax all kinds of interesting effects out of the text-shadow property.

1. Raised Text

This effect makes it appear as though 3D text is sitting on a flat surface.

How its done

A dark, closer-in shadow is used simulate the sides of the letters. A lighter, further-out shadow is used for the shadow being cast on the flat surface. This effect works best with a small blur value.

The code

2. Blurry Text

This simple effect creates blurry text.

How its done

The text made transparent, so the only thing visible is the shadow itself. Increasing the blur value of shadow makes the text blurrier.

The code

3. Embossed Text

This embossed effect mimics the one often used by a certain well-known manufacturer of computers, smartphones, tablets, and mp3 players.

How its done

Two similar shades of gray are used for the text and background. White is used on a sharp, very close-in text-shadow to simulate the visible inside edge of the embossed text.

The code

4. Glowing Text

This effect makes it appear that the edges of the text are glowing.

How its done

The shadow is centered and given a large blur value, so the shadow is visible around all the edges.

The code

5. Stroke Text

This effect creates an outline around the text.

How its done

8 different text shadows (north, east, south, west, northeast, southeast, southwest, northwest) are used to completely surround the text in shadows. This effect works best with low x-offset, y-offset, and blur values.

The code

6. Isometric Text

This effect creates isometric 3d text, that is 3d text without a vanishing point. (If you can figure out how to draw fully 3d text with a vanishing point, then you are awesome. Tell me how!)

How its done

A stack of colored shadows is used, with increasingly large x-offset and y-offset values. If you wanted to get really fancy, you could change the shadow color on each one, creating a gradient.

The code

7. Neon Text

This effect simulates neon lettering at night.

How its done

Similar to the stroke text, 8 different shadows are stacked in 8 directions, to completely surround the text in shadow. This time however, a blur value of 4px is used to simulate a diffuse glow rather than the crisp line in the stroke text. White text is used to simulate the brightest part of the neon lettering, in the center of the tubes. A dark background completes the effect.

The code

Bonus: Complex Neon

Neon lettering with multiple layers can be created by stacking shadows of different colors together. I've found that putting a black shadow between each colored layer helps make the layers more distinct and visible.

Sound off in the comments- Do you have a favorite text shadow effect? Share it with us!