Text Shadow Generator

12 tools

Design a CSS text-shadow visually.

Runs in your browser — your files and text stay on your device

Design a CSS text-shadow visually and copy the code. Adjust the horizontal and vertical offset, blur, color and opacity on a live preview; to layer several shadows for glow or outline effects, add more comma-separated values to the copied CSS by hand. Keep enough contrast so the text stays readable.

Flexbox Playground Grid Generator Box Shadow Text Shadow Border Radius Clip Path Glassmorphism Animation Easing Curve Filter Fluid Typography Unit Converter

X offset2px

Y offset2px

Blur4px

Opacity50%

Color

Sample Text

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.50);

How to use this tool

1Drag the offset and blur sliders, pick a color and opacity.
2Copy the generated text-shadow CSS.

Frequently asked questions

Can I stack multiple text-shadows?

Yes — text-shadow accepts a comma-separated list. Generate one here, then add more comma-separated values by hand for layered effects.

Is this generated on a server?

No — everything runs locally in your browser.

Guides

All guides →