CSS Text Shadow Generator (Multi-Layer)

CSS text-shadow accepts a comma-separated list, and every effect people associate with it — neon, embossed 3D lettering, a fake outline, a long diagonal shadow — is really just a stack of layers at different offsets, blurs and colours. This tool builds that stack visually: add and remove layers, drag x, y, blur and colour per layer, preview on any background, and start from one of six presets. The output is plain CSS you paste into a stylesheet.

Two details about the property decide how a stack behaves. Layers paint in the order written, with the first shadow closest to the text and each later one behind it, so reordering changes which colour wins where they overlap. And the blur value is not a pixel radius in any literal sense: the spec defines it as a Gaussian blur with a standard deviation of half the given length, which is why a blur of 12 spreads visibly further than 12 pixels and why doubling it does not double the glow.

The absence people trip over is spread. box-shadow has a fourth length that grows the shadow outward; text-shadow does not. An outline effect therefore has to be faked by stacking four or eight copies at small offsets around the glyph, which leaves gaps on diagonal strokes at large sizes and costs a layer each. If you want a genuine stroke, -webkit-text-stroke or paint-order: stroke fill will do it in one declaration and look cleaner — reach for the shadow stack when you want a glow, a depth effect or a colour bleed, not an outline.

Two things the preview cannot tell you. Shadows do not count toward contrast: WCAG measures the text colour against the background behind it, so pale text made legible by a heavy dark glow still fails the check, and will vanish for a reader whose settings override colours. And large blurred layers are expensive to paint — a headline with eight blurred shadows is fine, the same stack on a scrolling list of a hundred rows is not, and animating the property forces a repaint of the whole text on every frame.