Text Shadow Generator

Driving the Text Shadow Generator

1. Type your preview copy and pick a font size. Real text reveals problems that Lorem Ipsum hides - thin strokes, diacritics, wide letterspacing.
2. Set X offset, Y offset, and blur. Offsets move the shadow; blur softens it. Unlike box-shadow, text-shadow has no spread value - you compensate with layered shadows instead.
3. Pick the color plus opacity. Fully opaque shadows on text almost never look right. Start at 30-50% alpha.
4. Stack layers with "+ Add shadow". Multiple comma-separated shadows are how neon, outlines, letterpress, and retro 3D text are built.
5. Load a preset (glow, neon, 3D, emboss) to see a worked example, then tweak from there.
6. Copy CSS and paste into your stylesheet - output is a standard text-shadow declaration with no vendor prefixes needed.

How text-shadow is rendered

text-shadow is defined in CSS Text Decoration Module Level 3 and accepts a comma-separated list of shadow values, each with X offset, Y offset, optional blur radius, and color. Crucially, there is no spread parameter - the shadow always follows the actual glyph outlines produced by the font renderer (HarfBuzz, CoreText, or DirectWrite depending on your OS). That means ligatures, italic slants, variable-font weight axes, and emoji are all shadowed correctly.

Internally the browser renders the text twice: once as the shadow color with the glyph path offset and blurred using a Gaussian kernel, once as the foreground color on top. Layered shadows stack back-to-front like box-shadow, so the first shadow in the list renders on top. On modern browsers the blur pass runs on the GPU, but very large blur radii (above ~30px) still cost measurable paint time - Chrome\'s DevTools Performance panel will show the hit in the "Paint" and "Composite Layers" rows. For plain drop-shadow text there is no layout impact, only paint.

Realistic uses for text-shadow

• Hero text over photos - a subtle dark shadow rescues readability when you cannot control the background image.
• Neon signage effects stacking 3-6 same-color shadows with growing blur radii.
• Retro 3D typography using a tight staircase of 1px offsets: 1px 1px 0 #222, 2px 2px 0 #222, 3px 3px 0 #222.
• Letterpress / emboss - a 1px white shadow with a negative Y offset makes dark text look carved into the page.
• Faux outlines by stacking four 1px shadows at +X/-X/+Y/-Y for browsers where -webkit-text-stroke is not enough.
• Focus and hover emphasis on big headline links - a growing glow signals interactivity without a layout shift.

Pitfalls worth knowing

• WCAG contrast still applies. A shadow does not count as foreground contrast - screen readers ignore it entirely and low-vision users may not perceive it. Keep the underlying text-to-background ratio at 4.5:1 (normal) or 3:1 (large) even if the shadow makes things "look" legible.
• Sub-pixel jitter on thin fonts. Half-pixel offsets like 0.5px 0.5px on light fonts can produce fuzzy doubling on non-retina displays. Round to whole pixels for body sizes; sub-pixel is fine for headlines.
• Blur radius must be non-negative. A negative blur is invalid and the whole declaration is dropped. Browsers do not warn you - the text just renders without a shadow.
• No inset keyword. Unlike box-shadow, text-shadow has no inner-shadow mode. "Pressed in" text effects are faked by combining a dark shadow at the top with a light shadow at the bottom, or via background-clip: text.
• Emoji get colored over. On some systems multi-color emoji glyphs have their color flattened in the shadow pass, which can look odd if you shadow text that contains emoji.
• Print stylesheets. Many printer drivers ignore text-shadow - never rely on a shadow as a meaningful distinction on @media print.

Background on the property (also: CSS font shadow generator)

text-shadow first appeared in CSS2 (1998) but was removed in CSS 2.1 because no browser actually shipped it; it returned in CSS3 and was implemented in Safari 1.1, Firefox 3.5, Chrome from launch, and IE10. The current spec lives in the CSS Text Decoration Module Level 3, which also covers text-decoration-line, text-underline-offset, and related typographic effects. Browser support is now 100% on caniuse.com with no prefixes. The specification is deliberately simple - two offsets, one blur, one color - which is why complex effects are built by stacking multiple shadows rather than with additional parameters. For accessibility, WCAG 2.2 Success Criterion 1.4.11 "Non-text Contrast" does not apply to decorative text shadows, but 1.4.3 "Contrast (Minimum)" still governs the underlying text/background pair.

Text-shadow vs the alternatives

text-shadow is the right tool for drop shadows, glows, and stacked offsets on actual text. For a crisp outline, -webkit-text-stroke is better - it\'s supported everywhere except old Firefox and gives a single-pass outlined glyph. For colored outlines plus fill plus shadow (common in gaming and title cards), SVG <text> with stroke and filter beats CSS hands-down because you can control stroke alignment and miter behavior. For animated text lighting, CSS variables interpolated in @keyframes remain the simplest route - Houdini gets you per-frame control but adds a lot of complexity. Where CSS text-shadow loses out is high-end typographic effects like variable blur per letter or along-baseline shadow warping - those belong in Canvas 2D, WebGL, or an image editor. And remember the decision tree: if the shadow is part of the brand logo, export an SVG; if it\'s per-page headline styling, text-shadow is cheaper and more maintainable than any asset pipeline.