About the Text Shadow Generator
This text shadow generator previews the effect on live type rather than on an abstract box, because a shadow that looks convincing behind a large heading often destroys legibility at body size. Type your own preview text, then set the horizontal and vertical offsets between -30 and 30 pixels, the blur up to 60, and separate colours for the text and its shadow with an opacity slider. Font size from 14 to 96 pixels and weight from 300 to 900 let you judge the effect at the size and weight you will actually ship.
How to use the Text Shadow Generator
- 1
Type your own words into Preview text so you judge the effect on real content.
- 2
Set Horizontal offset and Vertical offset to position the shadow, then raise Blur to soften it.
- 3
Choose the Text colour and Shadow colour, and use Shadow opacity to keep the effect subtle.
- 4
Adjust Font size and Font weight to match your heading style, then copy the CSS rule.
What people use it for
Text over a photograph
A dark shadow with a large blur and no offset acts as a soft halo, holding a caption legible over a busy image without needing a solid overlay bar.
Neon and glow headings
Zero offsets with a bright shadow colour and a high blur produces a glow. Repeating the same shadow in a comma-separated list intensifies it convincingly.
Retro and letterpress type
A one-pixel light shadow below dark text on a mid-grey background simulates the engraved letterpress look used across a lot of interface typography.
Emphasising a display heading
A small offset shadow in a brand colour at low opacity adds depth to a hero headline while keeping the letterforms crisp enough to read at a glance.
How text-shadow differs from box-shadow
The syntax looks similar but is deliberately shorter: text-shadow takes a horizontal offset, a vertical offset, an optional blur radius and a colour, and that is all. There is no spread value and no inset keyword, because the shadow follows the glyph outlines rather than a rectangle and neither concept has a sensible meaning against a letterform. As with box-shadow, several shadows can be comma-separated and are painted first to last, with the first on top. Omitting the colour falls back to currentColor, which for text means the shadow matches the text itself — occasionally useful for a pure blur glow, usually a mistake. The offsets and blur accept any CSS length, so em units are worth considering: an em-based shadow scales with the font size, which keeps a heading effect proportionate across a responsive type scale where a fixed pixel shadow would look heavy on mobile.
Legibility, and when a shadow does more harm than good
A shadow behind text reduces the effective contrast between the glyph edge and the background, because the blurred edge sits at an intermediate luminance. WCAG measures contrast between the text colour and the background colour and takes no account of a shadow, so a design can pass a checker while being noticeably harder to read in practice. For body copy the safe approach is not to use one at all; if you must, keep the blur under about 2 pixels and the opacity low. Large display type is more forgiving because the letterforms carry enough weight to survive a softened edge. The one case where a shadow genuinely improves legibility is text over an image or video, where a dark blurred halo raises the local contrast against unpredictable content — a technique worth combining with a subtle scrim so the worst-case frame is still readable.
Tips
- Stack four one-pixel shadows at 0 blur in each direction for an outline, or use -webkit-text-stroke for a cleaner result.
- Use em units instead of pixels so the shadow scales with a responsive type scale.
- Avoid text-shadow on small body copy entirely; it costs more legibility than the effect is worth.