CSS Text Shadow Generator
Create a CSS text-shadow declaration with adjustable offsets, blur, color and opacity and inspect it on a live text preview.
Set your values
Adjust the values, then calculate your result.
How to use CSS Text Shadow Generator
- Choose offsets, blur and a shadow color.
- Set opacity and generate the text preview.
- Copy the declaration into the rule that styles your text.
Text shadows follow glyphs rather than the element box
A text-shadow is drawn around the characters. Its two offsets move the shadow, and its optional blur softens the edge. This differs from box-shadow, which follows an element’s box. The generated declaration contains a single shadow layer; multiple layers can be combined manually with commas.
Check readability in the final design
A shadow can change the perceived edge of text but does not automatically establish sufficient foreground/background contrast. Inspect the actual font, size and background in your component. Large blur and saturated colors can obscure small text. The preview uses one fixed sample so the generated declaration stays independent of your page’s typography.
Can text-shadow use spread or inset like box-shadow?
No. Those box-shadow controls are not part of the text-shadow syntax.
Is input uploaded?
Processing takes place in your browser. This tool does not send your input or selected files to a conversion API.