CSS Text Shadow Generator
Build text shadows visually with offset, blur, colour, and opacity — then copy ready-to-use CSS.
Live Preview
Preview Text
Generated CSS
Your Data Never Leaves Your Device
Every tool runs entirely in your browser. Nothing you type is uploaded, stored, or logged on our servers.
The CSS Text Shadow Generator previews the text-shadow property live on real type. Unlike box-shadow, text shadows take only an X offset, a Y offset, a blur radius, and a colour — there is no spread value and no inset keyword — so the controls here match exactly what the property accepts.
Stacking layers is what makes this property genuinely useful. Four one-pixel shadows offset in each direction produce an outline; a zero-offset shadow with a wide blur produces a halo that keeps light text readable over a photo; several coloured layers at increasing blur give you a neon glow. Layers are emitted comma-separated in paint order, and everything runs in your browser.
FAQ
Horizontal offset, vertical offset, blur radius, then colour. Unlike box-shadow there is no spread value and no inset keyword — those simply aren't part of the text-shadow syntax.
A dark shadow with no offset and a moderate blur — 0 0 8px rgba(0,0,0,0.8) — acts like a halo and lifts light text off a busy background without looking like a drop shadow.
Stack four layers offset one pixel up, down, left, and right in the same colour with zero blur. For real strokes, -webkit-text-stroke is sharper where you can rely on it.
Yes. Add up to four layers and they're output comma-separated, which is how CSS stacks them — useful for neon glows and layered retro effects.
A few shadows on headings are fine. Large blur radii applied to large amounts of body text are the expensive case, since the browser repaints the blur on every scroll or reflow.
No. The generator runs entirely in your browser and nothing is uploaded — copy the CSS when you're happy with the preview.