What is the CSS text-shadow property?

text-shadow adds one or more shadows behind text. Each shadow takes a horizontal offset, a vertical offset, an optional blur radius and a colour, written as: 2px 2px 4px rgba(0,0,0,0.35). Multiple shadows are separated by commas and stack from front (first) to back (last).

How do I create a glow or neon text effect?

Use one or more layers with zero x and y offset and an increasing blur radius in a bright colour. Stacking three layers — a tight glow plus two wider, softer ones — gives the classic neon look. Try the Neon glow preset and tweak the colour.

How do I make a text outline with text-shadow?

Add four hard layers (blur 0) at offsets of plus and minus one pixel on both axes in your outline colour. The Outline preset does exactly this. For thicker outlines, increase the offsets to two pixels and add the diagonal corners.

Can I layer multiple shadows?

Yes. This generator is built around stacking. Add as many layers as you like, reorder them with the arrows, duplicate a layer to fine-tune a copy, and toggle any layer on or off without deleting it. The combined CSS is generated automatically.

Is text-shadow supported in all browsers?

text-shadow is supported in every modern browser — Chrome, Firefox, Safari and Edge — and has been for many years. There is no vendor prefix needed. Very old versions of Internet Explorer (9 and below) ignored it, so the text simply shows with no shadow.

Is my data sent anywhere?

No. Everything runs in your browser. Your preview text and shadow settings are saved only in your own browser's local storage so they persist between visits, and nothing is ever uploaded to a server.

CSS Text-Shadow Generator

A visual CSS text-shadow generator that lets you stack multiple shadow layers, dial in each one with sliders, watch a live preview update instantly, and copy clean, production-ready CSS. It is built for front-end developers, designers and anyone who wants a polished text effect — a soft drop shadow, a neon glow, a crisp outline or a chunky 3D extrusion — without hand-writing comma-separated shadow lists or guessing at pixel values.

How it works

The CSS text-shadow property accepts a comma-separated list of shadows. Each shadow is four parts: a horizontal offset, a vertical offset, a blur radius and a colour — for example 2px 2px 4px rgba(0,0,0,0.35). Browsers paint the first shadow in the list closest to the viewer and each later shadow further behind, which is exactly why order matters when you build depth effects like long shadows and extrusions.

This tool turns that into a layer stack. Every layer gives you sliders for x offset, y offset, blur and opacity, plus a colour picker. The opacity slider is folded into the colour as an rgba() value automatically, so fully opaque layers stay as tidy hex codes and translucent ones become rgba(). You can reorder layers with the up and down arrows, duplicate a layer to tweak a near-copy, and toggle any layer on or off to compare variations without losing your work. The combined declaration is recomputed on every change and shown in the output box, ready to copy.

The preview panel renders your real text with the live shadow applied, so you judge the effect against an actual font size, weight, text colour and background rather than an abstract swatch. Eight starter presets — soft drop, long shadow, neon glow, 3D extrude, letterpress, outline, retro pop and fire — give you a one-click starting point you can then refine.

Example

Suppose you want a neon sign look. Start from the Neon glow preset, which stacks three zero-offset layers with increasing blur in shades of cyan, then set the text colour to a near-white and the backdrop to near-black. The generated CSS looks like:

text-shadow: 0px 0px 7px rgba(34,211,238,0.9),
             0px 0px 18px rgba(6,182,212,0.8),
             0px 0px 36px rgba(8,145,178,0.6);

For a flat 3D extrusion, stack four hard layers (blur 0) at offsets 1px/1px through 4px/4px in progressively darker shades, then add one soft blurred layer at the bottom to ground it. Every value updates live as you drag, and the Copy CSS button puts the full declaration on your clipboard. Nothing you type ever leaves your browser.