CSS Text Shadow Generator
Build a CSS text-shadow visually - offset, blur, and color - with a live preview on real text.
Adjust offset, blur, and color on live preview text - copy the generated CSS when it looks right.
For a shadow on a box/element rather than text, see the CSS Box Shadow Generator.
What Does text-shadow Control?
The text-shadow property adds a shadow directly to text characters, controlled by horizontal/vertical offset, blur radius, and color - commonly used for subtle depth or a readable overlay effect on images.
Why Use This Tool?
Text shadows are easy to overdo - a live preview on real, readable text (rather than imagining the effect) makes it obvious when a shadow has gotten too heavy or blurry.
How to Use It
- Adjust horizontal offset, vertical offset, and blur.
- Pick a shadow color and opacity.
- Copy the generated CSS.
Limitations
Like box-shadow, CSS supports comma-separated multiple text shadows on one element - this tool generates a single shadow layer, which you can combine manually for a multi-layer effect.