CSS text-shadow generator

Three lengths, no spread

text-shadow takes offset-x offset-y blur color — and crucially no spread and no inset, the two things box-shadow adds. The shadow follows the exact glyph outlines, not the element box, so it works on every letterform including web fonts and emoji. With no spread available, the only ways to make a text shadow heavier are a larger offset, a bigger blur, or stacking several shadows. A blur of zero gives a crisp offset duplicate (the basis of hard "block" lettering); a large blur diffuses the colour into a halo.

The patterns worth knowing

Three recipes cover most use. A tiny dark, low-alpha shadow — 0 1px 2px rgba(0,0,0,.5) — lifts light text off a photo or gradient so it stays readable. A zero-offset, large-blur, saturated colour produces a glow. And a comma-separated stack of shadows builds neon tubes, retro 3D extrusions (many 1px-stepped copies) or a full outline (four shadows, one per direction). Shadows in the list paint front-to-back, so put the tightest, brightest layer first and the wide ambient glow last.

Keep it legible and cheap

A shadow is decoration, never the thing that makes text readable: keep the underlying text-to-background contrast passing WCAG AA on its own, so the copy survives if shadows are disabled or render differently. Heavy blurs on body text hurt reading speed — reserve glows and neon for large display headings. text-shadow is cheap to paint but expensive to animate across long passages; if you want a shimmer, animate a short heading rather than a paragraph, and prefer transform for any motion.