How to Add a Text Shadow with CSS
Text shadows add depth to headings without images. This guide explains offsets, blur and color so your shadow lifts the text instead of muddying it.
What is the CSS Text Shadow Generator?
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.
How to use it
- 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.
Worked example
With offsets of 2px and 2px, a blur of 4px and a #000000 shadow color, the result is a .text-shadow rule with text-shadow: 2px 2px 4px #000000.
Should text shadows be dark or light?
Match the shadow to the background: a darker shadow suits light backgrounds, while a light shadow suits dark backgrounds or photos. Keep the blur small so letters stay sharp.
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.