What is a Text Shadow Generator?
The CSS text-shadow property draws a shadow behind text. It takes a horizontal offset, a vertical offset, an optional blur radius and a color. This generator lets you adjust each value with sliders and see the result instantly.
When to use it
Use it for headlines that need to stand out on a photo, soft glow effects, neon text, letterpress looks or a light outline for readability. Copy the generated line straight into your stylesheet.
How it works
Move the sliders to set x offset, y offset and blur, then pick a color and opacity. The tool builds the rule, such as text-shadow: 2px 2px 4px rgba(0,0,0,0.5);, and applies it to a preview. You can stack several shadows by separating them with commas, which is how glow and neon effects are made.
Frequently asked questions
What is the syntax of text-shadow?
text-shadow: offset-x offset-y blur-radius color; for example text-shadow: 2px 2px 4px #000;
How do I make a glow effect?
Use an offset of 0 0, a larger blur and a bright color. Stacking two or three shadows with growing blur makes the glow stronger.
Does text-shadow hurt readability?
A heavy shadow can. Keep blur and opacity low for body text and check contrast with the Color Contrast Checker.
Is text-shadow supported in all browsers?
Yes, it is supported in every modern browser.