CSS Text Shadow Generator

The CSS text-shadow property paints one or more blurred or sharp copies of the text behind it. With a single layer it lifts a heading off a photo; with several layers it can draw outlines, neon glows, 3D lettering and retro offsets — all without images, so the text stays selectable and sharp at any size. This generator writes the value, validates any extra layers you add, and renders the result in your own browser.

How to use this tool

1. Pick a preset, or keep "Custom" and set the offsets, blur, color and opacity.
2. Use "Preset size" to make outlines thicker, glows wider or 3D text deeper.
3. Add extra layers, one per line, to combine effects.
4. Set the preview text and colors to match your page, then copy the CSS line.

Formula

text-shadow: <x> <y> [<blur>] <color> [, more layers]

Positive x moves the shadow right and positive y down; blur softens it and cannot be negative. Unlike box-shadow there is no spread and no inset. The outline preset places 8 sharp copies one "preset size" away in every direction; 3D extrude stacks one copy per pixel of depth.

Example

The defaults — 2 px right, 2 px down, 4 px blur, black at 40% — give text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);, a soft drop shadow. The hard preset at 3 px in tomato gives 3px 3px 0 #ff6347, and a 1 px outline needs 8 layers such as -1px -1px 0 #000000 and 1px 1px 0 #000000.