CSS Text-Shadow Stack

Stacked text-shadow: neon, retro and 3D type

The text-shadow property paints a coloured shadow behind every glyph of a text run. Its syntax is shorter than box-shadow — only x, y, blur and color (no spread, no inset) — but it accepts a comma-separated list, and stacking multiple shadows is where the magic happens. One shadow looks flat; four well-chosen shadows can simulate neon, chromatic aberration, letterpress or full 3D extrusion.

.neon {
  color: #fff;
  text-shadow:
    0 0  5px #0ff,
    0 0 10px #0ff,
    0 0 20px #0ff,
    0 0 40px #0ff;
}

Famous recipes

• Neon (Tron 1982) — 3-4 shadows of the same saturated colour, zero offset, growing blur. Combine with a white foreground for the classic glow.
• 80s chromatic aberration — one red shadow shifted left, one cyan shadow shifted right (-2px 0 #f0f, 2px 0 #0ff). Sells the VHS/synthwave vibe.
• Letterpress — one light shadow above (0 -1px 0 #fff) and a dark shadow below (0 1px 0 #000) embosses the text into the page.
• 3D extrusion — repeat the same offset incrementally (1px 1px, 2px 2px, 3px 3px ...) for a chunky depth effect.
• Outline (text-stroke fallback) — four 1px shadows at top, right, bottom and left simulate -webkit-text-stroke in older browsers.

text-shadow vs filter: drop-shadow

For text specifically, text-shadow is more performant — it's measured per-glyph by the text rasteriser, not by a generic filter pipeline. filter: drop-shadow on a text element works too and follows the alpha mask of each character, but it triggers an extra compositor pass and disables sub-pixel anti-aliasing in Chrome.

Long shadows, glitch and animation

The "long shadow" flat-design trend (popularised around 2013) builds a 45° shadow by stacking 100+ shadows one pixel apart — only feasible through a preprocessor mixin or generated CSS. The "glitch" effect chains two coloured shadows and animates their offset on a fast keyframe to simulate signal noise. Animating text-shadow is expensive because each frame repaints text — prefer opacity or transform when possible.

Accessibility and contrast

A shadow is not a contrast booster. WCAG measures the contrast ratio between the text colour and the background colour directly behind it — the shadow does not count. If your white text needs a dark backdrop for readability, paint an actual background or use a semi-transparent overlay; relying on a blurred halo will fail the audit. Animated text-shadow with high-contrast colour flicker can also trigger seizures — respect prefers-reduced-motion.

FAQ

Is there a limit on shadow count? The spec says no, but each shadow forces another paint pass per glyph. Beyond ~10 shadows on large bodies of text expect FPS drops.

Why can't I add spread to text-shadow? The spec was kept minimal. If you need a thicker halo, increase the blur or stack identical shadows with tiny offset variations.

Does text-shadow work on icon fonts? Yes — Font Awesome, Material Icons and any glyph rendered via @font-face accept text-shadow. For SVG icons inline, use filter: drop-shadow() instead.

Best stack for neon? 3-4 shadows with the same saturated colour, blur 5px, 10px, 20px and 40px, all with zero offset. Pair with a white or very light foreground colour.