What is the CSS text-shadow property?
The text-shadow property draws shadows behind the glyphs of text. Each shadow is offset-x offset-y blur-radius color; unlike box-shadow there is no spread value and no inset keyword. Several shadows can be stacked by separating them with commas, and the first one is painted on top.
Stacking is where text-shadow becomes a design tool. Zero-offset shadows with growing blur create a neon glow; hard shadows (zero blur) offset one pixel at a time build a 3D extrusion or long shadow; four one- or two-pixel shadows in each diagonal direction approximate an outline; and a single light shadow one pixel below dark text on a mid-tone background gives a letterpress look.
Shadows do not change the size of the text box or affect layout, and they are inherited, so setting a shadow on a heading also applies it to links and spans inside it.
How to use the CSS Text Shadow Generator
- Choose a preset — Subtle, Neon glow, 3D, Letterpress, Outline or Retro — or start from the default shadow.
- Select a layer to edit its horizontal and vertical offset, blur, color and opacity. Add or duplicate layers to stack effects (up to eight).
- Type your own preview text and adjust font size, weight, text color and background to match your design.
- Copy the CSS. It includes the text color so the effect looks the same in your project.
Example
A neon heading that also keeps a solid color for readability:
.neon {
color: #ecfeff;
text-shadow:
0 0 4px rgba(255, 255, 255, 0.9),
0 0 12px #22d3ee,
0 0 24px rgba(34, 211, 238, 0.9),
0 0 48px rgba(8, 145, 178, 0.8);
}Tips and gotchas
- Keep body text shadows subtle or remove them entirely — strong shadows blur letter edges and reduce legibility for low-vision readers.
- Text shadows do not count toward contrast. Make sure the text color itself meets WCAG contrast against the background.
- For a crisp outline on large display type,
-webkit-text-stroke(supported in all modern browsers despite the prefix) gives cleaner corners than four shadows, but it strokes inward and thins the letters. Shadows remain the safer fallback. - Long shadows built from many layers are cheap at heading sizes, but avoid animating them on large blocks of text.
- A glow can be animated with the CSS Animation Generator by changing
text-shadowin keyframes — keep it short and respectprefers-reduced-motion. - For shadows on boxes or images use the Box Shadow Generator or
drop-shadow()from the Filter Generator.
Frequently Asked Questions
Can text-shadow have a spread value?
No. text-shadow only accepts offsets, blur and color. To thicken a shadow, stack several copies with small offsets in different directions or with increasing blur.
How do I make a text outline with CSS?
Add four hard shadows offset diagonally, e.g. -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000. For thicker outlines add the four straight directions too. Alternatively use -webkit-text-stroke: 2px #000.
Why does my neon glow look weak?
Glows need contrast: use a dark background, a very light text color and several zero-offset shadows with increasing blur (4px, 12px, 24px, 48px) in the same saturated color.
Is text-shadow supported in all browsers?
Yes. text-shadow with multiple shadows works unprefixed in every modern browser. Very old versions of Internet Explorer ignored it, which is harmless because the text remains readable.
Does text-shadow affect performance?
Static shadows are cheap. Large blur radii on long paragraphs or animated shadows can increase paint time, so reserve heavy effects for short headings.