Text Shadow Generator
CSS text shadow
CSS text shadow Runs locally in your browser
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.30);
About the
The Text Shadow Generator sets the offset, blur, colour and opacity of a shadow behind text, with a live preview and the CSS. Unlike box-shadow it has no spread value, which catches people out: the only way to make a text shadow heavier is to stack several shadows in one declaration. It is most useful for legibility, putting a subtle dark shadow behind light text on a photograph, and it should never be the thing that makes text readable, because it disappears the moment the background changes.
Where people use the
- Adding a subtle shadow so a caption reads over a photograph.
- Making a pressed or engraved heading effect.
- Producing a retro or neon text treatment.
- Testing how heavy a shadow needs to be before it looks cheap.
How to use the
- 1
Set the offsets
Offset X moves right, offset Y moves down. A one or two pixel offset reads as depth; anything larger starts to look like a drop shadow.
- 2
Set the blur
Blur softens the edge. Zero gives a hard duplicate of the text, which is how outline and retro effects are made.
- 3
Choose colour and opacity
Dark text on light backgrounds wants a light shadow and vice versa. Keep opacity low unless you want an obvious effect.
- 4
Copy the CSS
The rule includes the rgba colour, ready to paste.
- 5
Stack shadows if you need more weight
Add a second shadow separated by a comma in your stylesheet. That is the only way to thicken a text shadow, since there is no spread.
Tips and best practices
- Less is more: one or two pixels at low opacity beats a heavy blur.
- Never rely on a shadow alone for accessibility; fix the contrast underneath.
- Remember the property is inherited, so scope it to the element you mean.
Frequently asked questions
Why is there no spread value?
Because text-shadow does not support one. Its syntax is offset X, offset Y, blur and colour only. To simulate spread you stack several identical shadows with slightly different offsets.
Can I use it to make text readable over an image?
Only as a supplement. A shadow helps at the margins but fails on busy areas, and it does not count towards the WCAG contrast ratio, which is measured against the background colour. Add a scrim or a solid panel if legibility genuinely matters.
How do I outline text?
Stack four shadows at plus and minus one pixel in each direction with zero blur. That produces an outline effect without needing -webkit-text-stroke, which is not supported everywhere.
Does it slow the page down?
A single static shadow costs almost nothing. Animating a text shadow, or applying a large blurred one to a lot of text, is where repaint cost appears.
Is it inherited by child elements?
Yes. Text shadow is inherited, so setting it on a container applies it to every descendant with text, which is occasionally surprising.