What You’ll Learn

The text-shadow property adds shadow effects to text — from subtle depth to glowing headlines and layered typography styles.

Introduction

The text-shadow property in CSS is used to apply shadow effects to text. It allows you to add one or more shadows to text, making it stand out and giving it a three-dimensional effect.

This property can enhance the visual appeal of your text content and is widely used in web design for creating various text effects.

Definition and Usage

Use text-shadow when you want headings, buttons, or hero text to feel more polished — for example, a soft drop shadow on a title over a photo, or a neon glow on dark backgrounds.

📝 Syntax

The syntax for the text-shadow property is straightforward. It allows you to define multiple shadows, each specified by an offset, a blur radius, and a color.

element {
  text-shadow: offset-x offset-y blur-radius color;
}

Basic Example

h1 {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

Syntax Rules

• offset-x — horizontal distance (positive moves right, negative moves left).
• offset-y — vertical distance (positive moves down, negative moves up).
• blur-radius — optional; larger values create softer shadows. Defaults to 0 (sharp).
• color — optional; defaults to the current text color if omitted.
• Separate multiple shadows with commas; the first shadow is painted on top.

Related Properties

• box-shadow — adds shadows to an element’s box, not its text shape
• filter: drop-shadow() — applies a shadow filter to the rendered element
• color — sets the text color that shadows can complement

🎯 Default Value

The default value of the text-shadow property is none, meaning no shadow is applied to the text.

💎 Property Values

Each shadow is built from length and color components. You can also use the keyword none.

When to Use text-shadow

text-shadow is a great choice when typography needs extra depth or contrast:

• Hero headings — Make large titles pop over photos or gradients.
• Dark UI themes — Add neon or soft glow effects to accent text.
• Readability — A subtle shadow can help light text stay readable on busy backgrounds.
• Decorative branding — Layer multiple shadows for retro or 3D letter styles.

Examples Gallery

In this example, we’ll apply a simple shadow effect to a heading.

<style>
  h1 {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  }
</style>

<h1>Text with Shadow</h1>

.neon {
  color: #e0f2fe;
  text-shadow:
    0 0 8px #38bdf8,
    0 0 16px #0ea5e9;
}

.stacked {
  color: #fef08a;
  text-shadow:
    1px 1px 0 #ca8a04,
    2px 2px 0 #a16207,
    3px 3px 0 #854d0e;
}

.emboss {
  color: #cbd5e1;
  text-shadow:
    1px 1px 0 #fff,
    -1px -1px 0 #64748b;
}

♿ Accessibility

• Do not rely on shadow alone — Ensure text color contrast meets WCAG guidelines without the shadow.
• Keep body text subtle — Heavy shadows on paragraphs reduce readability; reserve strong effects for headings.
• Test on photos — Shadows that help on one background may fail on another; verify real content.
• Motion sensitivity — Animated glowing text can distract; use animation sparingly.

text-shadow vs box-shadow

text-shadow follows the outline of each character. box-shadow wraps the element’s box. Use text-shadow for typography effects and box-shadow for cards and buttons.

/* Shadow follows letter shapes */
h1 { text-shadow: 2px 2px 4px rgba(0,0,0,0.4); }

/* Shadow wraps the element box */
.card { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

💡 Best Practices