CSS text-shadow Generator with Live Preview
Generate a CSS text-shadow with sliders for offset, blur, color and opacity, and copy the ready-to-paste declaration — runs 100% in your browser, no upload.
CSS text-shadow generator
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
🔒 Generated in your browser — nothing is uploaded.
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 in seconds.
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 pixels and joins them with the color you chose. 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.
Is anything I create uploaded to a server?
No. The preview and the generated CSS are produced entirely in your browser with JavaScript. Your slider settings, chosen color and the resulting text-shadow code are never sent, stored or uploaded anywhere.