CSS Text Shadow Generator
Free CSS text-shadow generator with live preview. Stack up to 8 shadow layers, start from 10 presets (glow, neon, 3D, retro, outline, fire) and copy the CSS or Tailwind class.
CSS text-shadow syntax
The text-shadow property takes a horizontal offset, a vertical offset, an optional blur radius and a colour. Unlike box-shadow, it has no spread and no inset.
- Horizontal offset: positive moves the shadow right, negative moves it left.
- Vertical offset: positive moves it down, negative moves it up.
- Blur radius: 0 gives a sharp copy of the text. Higher values make it softer.
- Colour: defaults to the text colour if you leave it out.
How to add a text shadow in CSS
h1 {
/* x-offset y-offset blur color */
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}Text glow effect
Use zero offsets and stack a few blurs in the same colour. It works best on a dark background.
.glow {
color: #fff;
text-shadow:
0 0 8px rgba(59, 130, 246, 0.8),
0 0 24px rgba(59, 130, 246, 0.6);
}Neon text
.neon {
color: #fff;
text-shadow:
0 0 4px #fff,
0 0 12px #ff00de,
0 0 24px #ff00de,
0 0 48px #ff00de;
}Text outline with text-shadow
Four sharp 1px shadows, one in each direction, draw an outline that works in every browser. For thicker, cleaner outlines, use -webkit-text-stroke. See my CSS text stroke guide.
.outline {
color: #fff;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}3D text effect
Stack sharp shadows that move 1px further each time.
.text-3d {
color: #1f2937;
text-shadow:
1px 1px 0 #9ca3af,
2px 2px 0 #9ca3af,
3px 3px 0 #9ca3af,
4px 4px 0 #9ca3af;
}Text shadow in Tailwind CSS
Tailwind v4.1+ has text-shadow-sm, text-shadow-md, text-shadow-lg and more. For a custom one, use an arbitrary value: text-shadow-[0_2px_4px_rgba(0,0,0,0.3)]. The generator above writes this class for you.
FAQ
Can I use multiple text shadows?
Yes. Separate them with commas. The first shadow is drawn on top. That’s how glow, neon, 3D and outline effects are built.
Why doesn’t text-shadow have spread?
The spec only defines offset, blur and colour for text-shadow. To make a shadow thicker, stack several copies, or use -webkit-text-stroke for outlines.
Does text-shadow affect readability?
Subtle shadows can help text stand out on images. Heavy blur or low contrast makes body text harder to read, so keep strong effects for headings.
Is text-shadow supported in all browsers?
Yes. It works in every modern browser without prefixes.
Need a shadow on a box instead? Try the CSS Box Shadow Generator. More tools: CSS Gradient Generator, Glassmorphism CSS Generator.