CSS Text Shadow Generator

Typography That Pops Off the Page

The Neon Glow Recipe

The iconic neon sign effect uses multiple text-shadow layers at the same offset (0, 0) with increasing blur radii. A typical neon glow: text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa. The first three layers (white, small blur) create the bright core, while the last two (colored, large blur) produce the outer glow. On a dark background with a white or light-colored font, this creates a convincing illuminated tube effect. For pulsing neon, animate the shadow's blur and opacity using CSS keyframes.

Syntax & Stacking

text-shadow: <x> <y> <blur> <color>, ...

Unlike box-shadow, text-shadow has no spread parameter and no inset keyword. The shadow follows the exact glyph shape of each character, including ligatures and kerning. Multiple comma-separated shadows stack in order — the first declared shadow is rendered on top. This stacking order is critical for 3D lettering effects, where each layer is offset by 1px to build up a sense of depth.

Legibility Enhancement

Text shadows are not just decorative — they solve real legibility problems. White text on a photo background becomes unreadable where the image is light. A subtle dark shadow like text-shadow: 0 1px 3px rgba(0,0,0,0.6)ensures readability without looking like a design effect. Hero banners, video overlays, and map labels all benefit from this technique. For maximum legibility, keep the blur between 2-4px and opacity between 40-70% — visible enough to create contrast, subtle enough to remain invisible as a design element.

Retro & 3D Lettering

The classic letterpress effect uses two shadows: a 1px light shadow above (emboss) and a 1px dark shadow below (deboss). For 3D block lettering, stack 5-10 shadows with incrementing offsets: text-shadow: 1px 1px #d4a373, 2px 2px #d4a373, 3px 3px #d4a373, 4px 4px #d4a373, 5px 5px #d4a373. Each pixel of offset adds one “layer” of depth. Combine with a slightly darker color per layer to simulate perspective shading. This technique works best on bold, heavy-weight display fonts at 48px or larger.

Frequently Asked Questions

Why doesn't text-shadow have a spread parameter like box-shadow?

Text-shadow traces the actual glyph outline, which is irregular and complex. Expanding an arbitrary glyph shape outward (spread) is computationally expensive and ambiguous at corners and junctions. To simulate spread, layer multiple shadows at the same position with incrementally larger blur values, or use the outline/stroke technique: -webkit-text-stroke: 2px #000 combined with text-shadow.

How many text-shadow layers are too many for performance?

Each shadow layer triggers a separate paint operation on the text's glyph raster. On desktop browsers, 5-10 layers on a single heading are fine. Beyond 20 layers, especially with large blur values on animated text, you may notice dropped frames. On mobile, keep it under 5 layers. If you need complex effects, consider rendering the text shadow as a static background image or using an SVG filter instead.

Does text-shadow work with transparent or semi-transparent text color?

Yes, and this enables a popular trick: set the text color to transparent and use text-shadow to create the visible text. Since the shadow ignores the text's color opacity, you get a shadow-only rendering. Combine with -webkit-background-clip: text for gradient text with shadows, or use transparent text with multiple colored shadows for a multicolor outline effect.