Most text shadow tutorials show finished effects and skip the decisions a generator has to make. Ours emits one exact string per state, and reading that string teaches the property faster than any gallery. This article walks the real component, the five presets it ships with their actual values, and the failure modes built into the output format.
The exact output format
Every layer becomes four values: offset x, offset y, blur, color. The generator joins layers with a comma, a newline, and four spaces of indent. Zero values keep their px unit.
Open the tool and it loads one default layer, offset x 2, offset y 2, blur 4, black. The copied declaration reads:
text-shadow: 2px 2px 4px #000000;
Add a second layer and the string becomes:
text-shadow: 2px 2px 4px #000000,
4px 4px 8px #000000;
Two details matter. The copy button includes the property name and the final semicolon, so paste straight into a rule block. And every length carries px, including zero, which keeps the string uniform when you edit values by hand later.
A worked example: the retro preset, decoded
Press the retro preset button and the component loads three hard layers. The emitted CSS:
text-shadow: 2px 2px 0px #e74c3c,
4px 4px 0px #e67e22,
6px 6px 0px #f1c40f;
Read it as three stacked copies of the glyphs. The first copy sits 2 px down and right in red, the second 4 px out in orange, the third 6 px out in yellow. All three carry blur 0, so every copy keeps a sharp edge. The warm color run from front to back produces the stepped poster look. The preview panel renders from this same string, so the preview and the code can never drift apart.
To make the effect your own, change one number at a time. Push the third layer to 8 px and the staircase deepens. Raise the first layer blur to 2 and the front edge softens while the back stays hard. The string tells you exactly which edit caused which change.
The other four presets, in real values
Neon loads four layers with zero offsets and blur radii of 7, 10, 21, and 42. The first three are cyan and the last switches to blue, so the bright core and the wide halo get different colors. Emboss loads two layers, white offset -1 px on both axes and black offset 1 px on both axes. Under dark text on a mid-tone surface that pair reads as a pressed edge. Fire loads three layers with vertical offsets of -2, -4, and -6 px and blur values 4, 8, and 12, running orange, red, then yellow, so the glow climbs upward. 3D loads four gray layers at 1, 2, 3, and 4 px steps, faking an extruded edge without any transform.
What the text-shadow property cannot do, proven by the interface
The layer panel exposes two offset sliders, one blur slider, and a color field. There is no spread control and no inset checkbox anywhere in the component, because the text-shadow property accepts neither value. Compare the box shadow generator in the same repository, which gives every layer a spread slider and an inset checkbox, because box-shadow supports both. When a tutorial promises an inset text shadow, it means a trick with pseudo-elements, never this property.
Failure modes the code admits
The color field is free text. Type a malformed hex value and the preview stops responding, while the output string keeps the bad value and the copy button ships it. The check that matters is the emitted code, not the preview. The remove button refuses to delete the last remaining layer, because a shadow list with zero layers is not what the tool emits, so one layer always survives. And nothing caps the layer count. Each added layer multiplies paint work across every character it shadows.
Performance and accessibility rules
Apply shadows to headings and short display text. Long paragraphs with blur values near the 50 px slider cap cost repaint time on every character, and the cost scales with text length. Screen readers ignore shadows entirely, so the base text color must clear contrast on its own. Test it deterministically: disable the shadow and read the page. If the text fails that test, the shadow was carrying the contrast, which fails the moment a user overrides styles.
Checklist before you ship a text shadow
- [ ] Confirm the pasted declaration includes the property name and semicolon.
- [ ] Verify every hex value in the copied string, and never trust the preview alone.
- [ ] Disable the shadow and recheck text contrast against the background.
- [ ] Keep high blur on headings only, never on paragraphs.
- [ ] Remove purely decorative layers before shipping body copy.
The generator runs at https://webrecast.com/en/text-shadow-generator. Load a preset, read the emitted string, and change one value at a time until the mapping from slider to CSS is automatic. If your layer stack produces an effect worth naming, send us the exact declaration and we will test it alongside our five presets.
