CSS Text Shadow Generator
Set shadow offsets, blur and color, and copy the text-shadow CSS for headings and display text.
Quick answer: enter your details below and click Generate shadow CSS — your result appears instantly, right here in your browser. Nothing you enter is uploaded or stored.
C
Developer
Enter your details below.
How to use
- Enter the horizontal and vertical shadow offsets in pixels.
- Set the blur amount and pick a shadow color as a hex value.
- Click Generate shadow CSS and copy the rule into your stylesheet.
About this tool
A text shadow adds depth behind letters, which can lift a heading off a busy photo or soften flat display type. Choose the horizontal and vertical offsets, the blur amount and the shadow color, and this tool writes the text-shadow declaration. Small offsets with a little blur look subtle; large offsets with no blur look bold and retro.
Frequently asked questions
What do negative offsets do?
A negative horizontal offset moves the shadow left instead of right, and a negative vertical offset moves it up instead of down.
Can I layer more than one text shadow?
Yes, text-shadow accepts a comma-separated list, but this tool writes a single shadow so the result stays easy to read and adjust.