CSS Text Shadow: Effects, Neon, and Typography Tricks

CSS text-shadow adds depth, glow, and dimension to typography. Unlike box-shadow, text-shadow follows the shape of individual characters — making it ideal for typographic effects that feel integrated with the letterforms.

The most impressive text-shadow effects use multiple stacked shadows. A neon glow requires 3-4 shadows at different blur radii. An emboss effect requires two shadows — one light, one dark — offset in opposite directions.

text-shadow syntax

The text-shadow syntax is: text-shadow: offset-x offset-y blur-radius color. Unlike box-shadow, there is no spread-radius and no inset keyword. The minimum is offset-x and offset-y (blur and color default to 0 and currentColor). Multiple shadows are comma-separated, with the first shadow rendered closest to the text.

Multiple text shadows

Multiple text-shadow values create rich typographic effects. The order matters — the first shadow is on top. Technique for depth: use three shadows with the same color but different blur values (0, 2px, 4px) to simulate a soft text drop shadow. Technique for outline: use four shadows offset by 1px in each cardinal direction with no blur.

Neon glow effect

Neon text uses stacked shadows with increasing blur and decreasing opacity. Typical recipe: first shadow 0 0 7px with the glow color, second shadow 0 0 10px same color, third shadow 0 0 21px same color, fourth shadow 0 0 42px a lighter or whiter version. The text itself should be the brightest version of the color or pure white.

Emboss and deboss

Emboss effect (raised text): two shadows — a dark shadow below and to the right, a light shadow above and to the left. The text appears to rise from the surface. Deboss (pressed in text): reverse the shadow positions — light below-right, dark above-left. The text appears pressed into the surface. These effects work best on mid-tone backgrounds.

Readable text on images

Text on images is a common accessibility challenge. text-shadow with high blur and dark color creates a soft halo that makes text readable over any image: text-shadow: 0 0 20px rgba(0,0,0,0.8), 0 0 40px rgba(0,0,0,0.6). This is often more elegant than a semi-transparent overlay. Combine with font-weight: bold for maximum readability.

Creative typography examples

3D text: stack 10-20 identical shadows offset by 1px each in the same direction to simulate depth. Retro print: use a 1-2px hard offset shadow in a contrasting color to simulate letterpress. Fire effect: stack orange, red, and yellow shadows with different offsets and blur. Glitch effect: two shadows in opposite directions using complementary colors (red and cyan).

Frequently Asked Questions