Text Shadow Generator
Design CSS text-shadow effects visually with a live preview, from subtle legibility shadows to neon glow and layered 3D extrusion.
The blur radius is not how far the shadow reaches
This is where most of the confusion lives. text-shadow: 0 0 10px black reads like
"a shadow 10px across". It is not. CSS defines a blur radius of r as a Gaussian with a
standard deviation of r ÷ 2, and a Gaussian does not have an edge.
| Blur radius | At r/2 | At r | At 1.5r | At 2r | Truly gone at |
|---|---|---|---|---|---|
| 4px | 60.7% | 13.5% | 1.1% | 0.03% | 6.7px |
| 10px | 60.7% | 13.5% | 1.1% | 0.03% | 16.6px |
| 20px | 60.7% | 13.5% | 1.1% | 0.03% | 33.3px |
At the stated radius the shadow is already down to 13.5% of its strength — and it keeps going. It falls below one part in 255, the point where an 8-bit channel can no longer represent it, at 1.66 times the stated radius. That multiple is identical for every radius, because it is the same curve scaled: a 20px blur paints something faintly visible more than 33px out.
That matters practically because text-shadow does not participate in layout at
all. Nothing reserves space for it and nothing warns you, so the overspill quietly crosses
whatever sits next to the text. It is the usual explanation for a shadow that looked clean in
isolation and muddy once the element had a neighbour.
And blurring makes the shadow much weaker
A blur spreads a fixed amount of ink over a larger area, so the darkest point gets lighter in proportion. Relative to an unblurred shadow:
| Blur radius | Standard deviation | Peak intensity |
|---|---|---|
| none | — | 100.0% |
| 2px | 1 | 39.9% |
| 4px | 2 | 19.9% |
| 10px | 5 | 8.0% |
| 20px | 10 | 4.0% |
Doubling the blur halves the peak, exactly, at every radius. So a 20px shadow at full opacity is darker at its centre than you would guess from the colour you chose — about 4% of it. This is why large soft shadows always look weaker than intended.
The standard fix is to repeat the same shadow several times in one declaration, which composites them and builds the opacity back up. It works, with diminishing returns:
| Copies of a 10px shadow | Peak intensity | Gained |
|---|---|---|
| 1 | 8.0% | — |
| 2 | 15.3% | +7.3 |
| 3 | 22.1% | +6.8 |
| 4 | 28.3% | +6.2 |
Four copies take the peak from 8.0% to 28.3%, and each additional copy adds less than the one before — it can approach full opacity but never reach it. The cost is that each copy is a separate blur pass, so a four-deep stack on a large heading is real work for the compositor on every repaint. Two is usually the sensible stopping point.
How to use
- Set the offset, blur and colour.
- Add layers for glow or extrusion effects.
- Check readability at your real font size.
- Copy the generated CSS.
Frequently asked questions
What are the values?
Horizontal offset, vertical offset, blur radius and colour. Unlike box-shadow there is no spread, so building a thicker effect means layering several shadows at different offsets rather than growing one.
How do I make text readable over a photo?
A subtle dark shadow with a moderate blur and no offset, which surrounds the letters evenly and lifts them from the background. It is more forgiving than a solid panel and looks less heavy, though for a genuinely busy image a panel or overlay is more reliable.
How is a neon glow made?
By layering several shadows of the same colour at increasing blur radii and no offset, typically with a white or very pale core colour underneath. Real neon has a bright tube and a soft halo, so reproducing both is what makes the effect convincing.
How do I create a 3D extrusion?
By stacking many shadows at successively larger offsets in the same direction, each one pixel further than the last, forming a solid side. It is verbose but produces a genuine sense of depth, and darkening the colour along the stack improves it further.
Does text-shadow affect readability?
It can either help or hurt considerably. A light shadow separating text from a busy background aids legibility; a heavy or offset shadow at body-text size reduces it, because the shadow interferes with the letterforms. Reserve strong effects for large display type.
What is the difference from a text stroke?
A shadow sits behind the letters, while a stroke outlines them. A stroke gives a crisp outline and can be applied outside the letterform, whereas the older webkit stroke property draws inward and thins the glyph. For an outline effect, layering four shadows at diagonal offsets is often the more reliable approach.
🔒 This tool runs entirely in your browser. Nothing you enter is uploaded, logged, or stored.