ffee
All tools
Text Shadow Generator
Layer up to five text shadows, preview them on light and dark backgrounds and copy the CSS.
Layer text shadows
Shadow
How to use the Text Shadow Generator
- Set the offset, blur, opacity and colour of the shadow.
- Add more layers and check the preview on light and dark backgrounds.
- Copy the generated rule with its text-shadow value.
Features
- Up to five stacked shadow layers
- Live preview on a light and a dark background
- Offset, blur, colour and opacity controls
- Copyable CSS with the matching text colour
Advertisement
Frequently Asked Questions
Common questions about the free online text shadow generator.
The property takes an x offset, a y offset, a blur radius and a colour, so 2px 3px 4px
rgba(17, 24, 39, 0.45) is a typical value.
It softens the edge of the shadow. Zero gives a hard copy of the letters, and larger values
spread the shadow into a soft glow.
Yes. Separate each shadow with a comma. The first shadow sits on top, and later shadows are
painted behind it.
Every extra layer multiplies the offset and blur, so the shadows build up into a soft three
dimensional depth rather than a flat double copy.
A shadow tuned for white paper can vanish or look dirty on a dark theme, so the preview shows
both before you commit to a value.
Rarely. The shorthand is clearer and the longhand set, such as text-shadow-color, still has
limited browser support today.
It can. A heavy shadow lowers contrast, so keep the text colour and background pair strong
enough to read comfortably on its own.
Yes. The output box holds the whole rule, so copy the text-shadow line on its own if you want
to paste it into an existing style.
Yes. Everything is written in your browser with plain JavaScript, so no value and no settings
leave your device.
Last updated: October 10, 2026