Text Shadow Generator

Start from a preset or build a shadow from scratch. Each layer has four knobs: an x-offset (horizontal distance), a y-offset (vertical distance), a blur radius (how soft the shadow edge is), and a color with an opacity slider. Unlike box-shadow, text-shadow has no spread and no inset — the shape is defined by the glyph outlines themselves, so wider or softer effects are built by stacking more layers instead of tuning a spread.

The order of layers matters: the first layer in the list paints on top, the last paints at the bottom. For a 3D stack you list the offsets in ascending order and let the deeper layers sit underneath. For a glow you usually stack the same color three or four times at increasing blur — each additional copy makes the glow larger without flattening the core.

Classic recipes worth knowing. A soft drop is one layer at roughly 0 2px 4px with ~35% black for cards and headings over photos. A letterpress effect uses two hard shadows — white 0 1px 0 below and a darker tone 0 -1px 0 above — rendered over a light neutral background. An outline is four hard shadows at the diagonals (±1px ±1px 0) in the same color; the trick works without any actual text stroke and ships in every browser. A long shadow is a dozen or more identical layers marching one pixel further in the same direction.

Keep legibility in mind on real backgrounds before shipping. A neon glow looks right on a dark surface but destroys contrast on white. Multi-layer shadows also cost paint time — if you are animating anything nearby, keep the layer count modest.