CSS Text Shadow Generator
Note: For text over a photograph, a shadow with no offset and a wide blur reads as separation rather than as a shadow — and it costs you far less of the image than dropping a dark overlay across the whole thing.
The genuinely useful case is text over a photograph. A background image gives you no control over contrast, and the same white headline that reads perfectly over the dark part of an image disappears over the bright part. A soft, wide, low-opacity shadow directly behind the text — no offset, large blur — darkens just enough to hold the letters apart from whatever is behind them, without looking like a shadow at all. That is the legibility preset here, and it is worth reaching for before adding a translucent overlay across the whole image.
An outline is four shadows, one per diagonal, at zero blur. It works, and it is what people used before -webkit-text-stroke was widely supported. The stroke property is now the better tool for a thick outline because it renders as a single clean edge rather than four overlapping copies; the shadow version is still better for a one-pixel outline, where the stroke can look thin and inconsistent between browsers.
A warning about neon: it needs three or four stacked shadows at increasing blur to look right, and each one is another paint operation on every frame the text is repainted. On static text that is free. On text that animates or scrolls under a transform, stacked glows are a measurable cost.
Frequently Asked Questions
Why is there no spread value?
text-shadow simply does not define one — it takes offset-x, offset-y, blur-radius and colour, and nothing else. To get a denser shadow, stack two or three with the same offsets and different blurs; they compose rather than sitting side by side.
What is the best way to keep text readable over an image?
A single shadow with no offset, a generous blur and a low-opacity dark colour. It reads as the text being separated from the background rather than as a shadow. It is also far less destructive to the image than dropping a dark overlay over the whole thing.
Should I use text-shadow or -webkit-text-stroke for an outline?
Stroke for anything thicker than a pixel — it renders one clean edge instead of four overlapping copies, and it does not thicken at the corners. The four-shadow trick is still better at one pixel, where stroke rendering varies noticeably between browsers.
Does text-shadow hurt performance?
Not on static text. It does have a cost per repaint, so stacked shadows on text that animates, scrolls under a transform, or sits inside a continuously updating element are worth measuring. A neon effect is typically three or four shadows, which multiplies that cost.
