CSS Text Shadow Generator
text-shadow: 2px 2px 4px rgba(25, 24, 21, 0.45);The CSS text shadow generator sets the horizontal offset, vertical offset, blur radius and colour of a shadow behind live preview text. Unlike box-shadow, text-shadow has no spread parameter and no inset keyword. It takes three lengths and a colour, and that is all.
How it works
text-shadow: offset-x offset-y blur color;
- offset-x / offset-y
- displacement right and down, negative for left and up
- blur
- softness of the shadow edge; 0 gives a hard duplicate of the glyphs
Text shadows apply per glyph rather than to the text block, so they follow letterforms including counters, the enclosed spaces inside letters like o and e, which is why a heavy shadow can fill those in and hurt legibility at small sizes.
Examples
A standard soft shadow
Offsets
2px, 2px
Blur
4px
Opacity
45%
Result
text-shadow: 2px 2px 4px rgba(25, 24, 21, 0.45);
A small offset with a moderate blur lifts text off a busy background without making it look embossed.
A glow with no offset
Offsets
0px, 0px
Blur
12px
Opacity
80%
Result
text-shadow: 0px 0px 12px rgba(25, 24, 21, 0.8);
With both offsets at zero the shadow spreads evenly in all directions, which reads as a glow rather than a shadow. A light colour on a dark background is the usual use.
Frequently asked questions
Why does text-shadow have no spread value?
Because the specification never defined one. box-shadow gained spread to grow a rectangle, which is well defined; growing a glyph outline is not, so text-shadow takes three lengths and a colour only.
Can text-shadow improve readability over an image?
Yes, and it is often better than a semi-transparent overlay because it darkens only the area immediately around the glyphs. A 0 0 8px shadow in the background colour at high opacity is the usual approach. Check the result against a contrast target rather than trusting it by eye.
Why does my shadow make small text look blurry?
Because the shadow fills the counters, the enclosed spaces inside letters like o, e and a. At small sizes those spaces are only a few pixels wide, so any blur closes them. Reduce the blur or restrict shadows to headings.
Can I layer multiple text shadows?
Yes, comma-separated, with the first painted on top. Layering is how outline effects are built, four hard shadows at one-pixel offsets in each direction produce an outline without a separate stroke property.