CSS Text Shadow Generator

Stack up to five text-shadow layers, each with its own offset, blur, opacity and colour, and check the result on sample text. Copy CSS puts the stacked .shadowed-text block on the clipboard.

Runs locally in your browser

View category: Frontend & Design (34)

· text-shadow · rgba() · layered type

CONTROL RACK

LIVE STAGE

VoriTools

EXPORT CSS

How to stack text-shadow layers and read the copied CSS

Up to five text-shadow layers stack in one preview: the text value, font size (24-120 px) and weight (400/600/800/900), the text and background colours, and per layer the horizontal and vertical offset (60 px each way), blur (0-100 px), opacity (0-1) and colour. Every keystroke redraws the stage, and the code panel holds the exact string Copy CSS puts on the clipboard.

The page opens with two layers: 2px 3px 0px rgba(54, 217, 138, 0.9) on top of 6px 8px 18px rgba(6, 29, 20, 0.55), on VoriTools at 64 px and weight 800. The export is a .shadowed-text block with one shadow per layer; the first layer in the list is painted on top.

Set the preview text (48 characters), the font size, the weight and the two stage colours. Size, weight, text colour and background dress the preview only; the shadow colour from the layer panel is what the export carries.

Pick the layer to edit in Active layer. Each layer keeps its own offset, blur, opacity and colour, and switching back restores exactly what you left there.

Type the horizontal and vertical offset (-60 to 60 px), the blur radius (0 to 100 px) and the opacity (0 to 1). On blur the clamped number replaces the field text and the shadow redraws; clearing a field restores the stored value instead of writing zero.

Add layer copies the active layer and moves the copy down: offset +2 px, blur +4 px (capped at 100) and opacity -0.12 (floored at 0.1). Five layers is the maximum, Remove keeps at least one, and both limits report in the status line.

Copy CSS puts the .shadowed-text block on the clipboard character for character; Reset returns VoriTools, 64 px, weight 800 and the two default layers.

Defaults, the layer counter and the values written back on commit

A five-layer cap, one colour per layer

The export prints one shadow per layer, joined with a comma and a line break, under a fixed .shadowed-text selector together with the colour picker value: color: #f7fff9 and text-shadow: 2px 3px 0px rgba(54, 217, 138, 0.9), 6px 8px 18px rgba(6, 29, 20, 0.55) on an untouched page.

Order is visible. In the pixel probe two layers shared the same 12 px offset and differed only in colour: red listed first rendered red glyph edges, and after the two colours were swapped the blue layer showed instead - the first shadow in the list is painted on top.

Offsets, blur and the rgba() alpha

Offsets are bounded at 60 px, blur at 0-100 px and opacity at 0-1. While you type, the preview stays inside those bounds; on blur the clamped number is written back into the field, so 999 in the horizontal offset stores 60 px and -10 in the blur stores 0 px.

The colour picker emits a hex value and the opacity field becomes the alpha channel: #123456 at 0.5 exports rgba(18, 52, 86, 0.5). A zero blur prints a hard copy of the glyphs, which is what the 2px 3px 0px default layer uses.

What this page does not do

Only the shadow stack and the text colour reach the export: the preview text, its size and weight, and the stage background stay in the stage. Each layer carries a single colour, so there is no gradient or per-layer spread value, no inset shadow and no drop-shadow() filter mode.

Everything runs inside the page - typing, adding and removing layers, Copy CSS and Reset sent zero network requests in the probe (en and ja); the only third-party request comes from the shared analytics tag. The exported selector is always .shadowed-text.