Text Shadow Generator

In short text-shadow takes the same offset, blur and colour as a box shadow but applies it to glyphs, and the honest starting point is that it usually makes text harder to read rather than easier. Letterforms are thin, and a soft shadow behind them fills the counters — the enclosed spaces inside a, e and o — which is exactly what legibility depends on. There is one case where it earns its place: putting text over an image or a busy background, where a tight dark shadow with a small blur restores the edge contrast the background is destroying. That is a legibility fix and it works. The decorative uses are what this tool is mostly asked for — outlines built from four offset shadows, embossed text from one light and one dark, neon from several coloured layers at increasing blur, and long shadows from dozens of stacked one-pixel offsets. All of them are valid CSS and all of them cost legibility, so keep them for headings and never for body copy. If you need an outline specifically, `-webkit-text-stroke` is cleaner than four shadows, and `paint-order: stroke fill` stops the stroke eating into the letterform.