CSS Text Shadow Generator
Type your own sample text, stack up to three shadow layers, and copy the finished text-shadow CSS.
About the Text Shadow Generator
Unlike box-shadow, the text-shadow property only takes an offset, a blur radius and a color for each layer (no spread, no inset), so the controls here are deliberately simpler. Stacking two or three layers is how engraved, neon and long "retro" drop-shadow text effects are usually built, each layer offset a little further with its own color and opacity. The preview area picks a light or dark text color automatically depending on how bright the background you choose is, so the sample stays readable while you tune the shadow.
Why text-shadow has no spread or inset option
box-shadow operates on a rectangular box, so it makes sense for it to support a spread radius (growing or shrinking that rectangle) and an inset keyword (flipping the shadow to appear carved into the box). text-shadow instead operates on the actual glyph outlines of each character, which have no simple "spread" concept, growing a letter's shadow outward isn't a rectangle operation, it would require redrawing the glyph shape itself at a larger size. And there's no inset option because a text-shadow is always rendered behind the glyphs it's attached to, there's no equivalent "in front" positioning the way box-shadow's inset flips a shadow to the interior of a box. This is exactly why the property only exposes offset-x, offset-y, blur, and color, it's a deliberately narrower tool than box-shadow, scoped to what actually makes sense for text.
The automatic text color uses a simplified luminance check, not full WCAG math
The light/dark text-color switch is based on the same channel weighting used in accurate contrast calculations (0.2126 red, 0.7152 green, 0.0722 blue, reflecting human eyes' greater sensitivity to green), but it skips the gamma-correction step that a true WCAG relative luminance calculation applies to each channel first. That makes this a fast, good-enough heuristic for picking a readable text color against your chosen background, not a certified accessibility contrast calculation, if you need to verify your final color combination actually passes a real WCAG contrast ratio threshold, check it with a dedicated contrast checker rather than relying on this quick pick. The threshold is also set slightly above the midpoint, at 0.55 rather than exactly 0.5, which nudges the switchover point to favor dark text slightly more often, since dark text tends to read as more comfortable on ambiguous mid-tone backgrounds than light text does.
Two very different effects from the same three controls
A "retro 3D" or engraved block-letter look comes from stacking several shadow layers with zero blur, the same solid color, and steadily increasing offset in the same direction, for example 1px 1px, then 2px 2px, then 3px 3px, which creates a solid stair-stepped extrusion behind the letters rather than a soft glow. A neon or glow effect comes from the opposite approach: minimal or zero offset, a large blur radius, and a saturated, semi-transparent color, sometimes layered twice at different blur amounts for a tighter inner glow plus a looser outer haze. Both effects use literally the same four inputs, offset, blur, color, opacity, just pushed toward opposite ends of their ranges.
Why this generator caps out at three layers
Three layers comfortably covers the common cases, a basic drop shadow, an engraved double-shadow, or a two-tone neon glow, but it's worth knowing the ceiling exists partly because text-shadow with blur is a genuinely expensive property for the browser to repaint, especially on larger blur radii or text that changes frequently (like an animated heading). It's also worth knowing that faking a full outlined stroke around text purely with shadows (rather than the separate, less universally supported -webkit-text-stroke property) typically wants four to eight evenly-angled offset copies with no blur to fully surround each letter, which is more layers than this tool's three-layer cap allows, for a true even outline effect you'd need to hand-extend the generated CSS with additional comma-separated shadow values.
Frequently Asked Questions
Why doesn't text-shadow have a spread or inset option like box-shadow does?
text-shadow operates on glyph outlines rather than a rectangular box, so there's no simple way to "grow" a letter's shadow the way spread grows a box shape. It also has no inset option because text shadows are always rendered behind the glyphs, there's no equivalent front-facing position to flip to.
Is the automatic text color picker a certified accessibility contrast check?
No, it uses the same channel-weighting formula as accurate luminance calculations but skips the gamma-correction step, making it a fast heuristic rather than a certified WCAG contrast measurement. For verified accessibility compliance, check your final colors with a dedicated contrast checker tool.
How do I create a solid "retro 3D" text effect instead of a soft glow?
Stack several shadow layers with zero blur, the same solid color, and steadily increasing offset in one direction (like 1px 1px, then 2px 2px, then 3px 3px). This produces a stair-stepped solid extrusion, the opposite of a glow effect, which instead uses minimal offset with a large blur radius.
Why is this tool limited to three shadow layers?
Three layers covers most common effects (drop shadow, engraved double-shadow, two-tone glow) while limiting the repaint cost of an expensive property, especially with blur applied to frequently-updating text. A full outlined stroke effect typically needs more layers than this cap allows.
Can I use this to create a full outline around my text?
Not fully with just three layers, faking an even outline with shadows alone typically needs four to eight evenly-angled, zero-blur offset copies surrounding each letter. You'd need to manually extend the generated CSS with additional shadow values, or consider the separate -webkit-text-stroke property instead.
Does the order of shadow layers matter, like it does for box-shadow?
Yes, the first-listed layer renders closest to the viewer among the shadows, with later layers positioned further behind. All text-shadow layers render behind the actual text glyphs regardless of order, since there's no inset option to bring one in front.