CSS text-shadow Generator with Live Preview
Stack up to 8 CSS text-shadow layers with offset, blur, colour and opacity, written as rgba() so the shadow can fade on its own.
CSS text-shadow generator
Presets
Edit the CSS by hand
Drag the preview, or focus it and use the arrow keys, to move the selected shadow.
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
[text-shadow:2px_2px_4px_rgba(0,0,0,0.5)]
What this text-shadow generator does
Drag the sliders for horizontal offset, vertical offset and blur radius, pick a shadow color, and set the opacity, and this tool builds a valid CSS text-shadow value in real time. The sample text above the code updates instantly so you can see exactly how the shadow falls before you commit to it, and a single click copies the full text-shadow: …; declaration ready to paste into your stylesheet. Everything is driven by simple, predictable ranges so you can dial in a soft drop shadow, a hard offset, or a subtle glow, and a number box beside each slider takes a value past the slider’s end. Start from a preset — soft, hard, distant, glow, neon, fire, outline, emboss, 3D extrude or retro — and Undo preset gives back the stack it replaced; type your own Preview text and set the Preview background and Text colour to judge the shadow against the page it is for. Random, at the end of the presets row, rolls a fresh stack when you want ideas, and Undo preset brings back what it replaced. Beside the colour picker, “Shadow color, typed” reads a hex, rgb(), hsl() or a CSS colour name, taking the opacity too when the colour carries one, and a row of quick colours — greys, then vibrant hues — sets the selected shadow's colour in one click.
How the shadow value is built
A CSS text-shadow is written as offset-x offset-y blur-radius color. This tool takes your two offsets and blur in the Unit you pick — px by default, or em or rem — and joins them with the color you chose. Several shadows, comma-separated, are drawn in list order — the first nearest the reader — which is how a glow, a 3D extrude or a neon sign is built, and you can stack up to eight and edit each one on its own. The color is expressed as rgba(), combining the red, green and blue channels from your hex color with the opacity slider so you can fade the shadow without changing its hue. Positive X pushes the shadow right and positive Y pushes it down, negative values move it the other way, and a larger blur softens the edge. The output is deterministic, so the same slider positions always produce the same code.
Frequently asked questions
What do the offset X, offset Y and blur values mean?
Offset X moves the shadow left or right, offset Y moves it up or down, and blur controls how soft the edge is. A blur of 0 gives a crisp hard shadow, while larger blur values spread the shadow out into a soft glow behind the text.
Why is the color output as rgba instead of hex?
Using rgba() lets the tool apply your opacity slider directly in the shadow value, so you can make the shadow semi-transparent without picking a different color. The red, green and blue channels come from the color you choose and the fourth value is the opacity from 0 to 1.
Can I use em or rem, or start from a preset?
Yes. The Unit select writes every length of every shadow in px, em or rem; switching converts at the browser's default font size, so the shadow keeps its size. The Presets row offers ready-made effects, most of them stacks, and Undo preset brings back the shadow you had before.
Can I type a value, paste my own CSS, or get it as a Tailwind class?
Yes. Every slider has a number box beside it that takes values past the slider’s end, for a deep extrude or a wide glow. Edit the CSS by hand opens the live declaration in a text box: change it or paste another text-shadow and Apply loads it back into the shadows. Under the CSS the same stack is written as a single Tailwind class, with Copy Tailwind class beside it.
Can it suggest a shadow, or take a colour in rgb() or by name?
Yes. Random, at the end of the presets row, rolls a fresh stack of a few visible layers — small offsets, a little blur, a saturated colour that can be seen — and, like a preset, keeps the stack it replaced behind Undo preset. Beside the colour picker, “Shadow color, typed” reads a hex (short or long), rgb(), hsl() or a CSS colour name; the opacity changes only when the colour carries its own, and a note says so when the box cannot read what was typed. Under it, a row of quick colours — greys, then vibrant hues — sets the selected shadow's colour in one click.