How to Create CSS Text Shadows (With Examples)
CSS text-shadow adds visual depth, outlines, and effects to text. From subtle reading-enhancement shadows to dramatic neon glows and 3D letterpress effects, text-shadow is the simplest way to make typography more impactful — especially on dark backgrounds.
- Add depth, outlines, neon effects, and 3D text with CSS text-shadow.
- Covers text-shadow syntax.
- Covers common text shadow effects.
- Covers layered text shadows.
- Covers text-shadow vs box-shadow.
Text-Shadow Syntax
text-shadow takes four values:
text-shadow: offset-x offset-y blur-radius color;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
Offset-x moves the shadow horizontally. Offset-y moves it vertically. Blur-radius softens the edge (0 = sharp). Color should use rgba() for natural semi-transparency.
Common Text Shadow Effects
Subtle depth: text-shadow: 0 1px 2px rgba(0,0,0,0.2) — barely visible, improves readability over images.
transform and opacity for smooth 60fps performance. These properties are handled by the GPU compositor and skip expensive layout recalculations.Hard outline: text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 — four shadows create a solid outline.
Neon glow: text-shadow: 0 0 7px #00FFD1, 0 0 20px #00FFD1, 0 0 40px #00FFD1 — layered zero-offset shadows.
Letterpress: text-shadow: 0 -1px 0 rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.1) — top shadow for depth, bottom highlight for emboss.
Layered Text Shadows
Like box-shadow, text-shadow supports multiple comma-separated values. Each shadow renders independently. Use this for 3D text effects:
width, height, top, or left. These trigger layout recalculations on every frame and can drop performance below 60fps.text-shadow:
1px 1px 0 #d35400,
2px 2px 0 #c0392b,
3px 3px 0 #e74c3c,
4px 4px 0 #e67e22;
This stacks four colored shadows at increasing offsets, creating a retro 3D text effect. The Text Shadow Generator lets you build and preview all these effects with sliders.
Text-Shadow vs Box-Shadow
text-shadow follows the shape of each character glyph. box-shadow follows the element's rectangular box (or border-radius). text-shadow doesn't support spread-radius or the inset keyword. Use text-shadow for typography effects; use box-shadow for container and card effects.
Frequently Asked Questions
How do I add a shadow to text in CSS?
Can I create a text outline with CSS?
What is the difference between text-shadow and box-shadow?
Use the Text Shadow Generator — free, no signup required.
⚡ Open Text Shadow Generator