How to Set Text-Shadow in CSS: Simple Guide with Examples

Use the text-shadow property in CSS to add shadow effects to text. It takes values for horizontal offset, vertical offset, blur radius, and color, like text-shadow: 2px 2px 5px gray;.

Syntax

The text-shadow property uses four values:

• Horizontal offset: How far the shadow moves right (positive) or left (negative).
• Vertical offset: How far the shadow moves down (positive) or up (negative).
• Blur radius: How blurry the shadow is; higher means softer edges.
• Color: The shadow color, like a named color, hex, rgb, or rgba.

You can add multiple shadows by separating them with commas.

css

text-shadow: 3px 3px 5px rgba(0,0,0,0.5);

Example

This example shows text with a gray shadow shifted 2 pixels right and down, with a blur of 4 pixels.

css

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f0f0;
  font-family: Arial, sans-serif;
}
h1 {
  font-size: 3rem;
  color: #333;
  text-shadow: 2px 2px 4px gray;
}

Output

A large heading 'Hello, world!' in dark gray with a soft gray shadow offset slightly to the bottom right on a light gray background.

Common Pitfalls

Common mistakes include:

• Forgetting units like px for offsets and blur.
• Using too large blur radius, making shadow invisible.
• Choosing shadow colors too close to text color, causing low contrast.
• Not separating multiple shadows with commas.

css

/* Wrong: missing units and no commas */
h1 {
  text-shadow: 2 2 5 gray, 3 3 5 black;
}

/* Correct: units and commas included */
h1 {
  text-shadow: 2px 2px 5px gray, 3px 3px 5px black;
}

Quick Reference

Value	Description	Example
Horizontal offset	Shadow shift right (+) or left (-)	2px
Vertical offset	Shadow shift down (+) or up (-)	2px
Blur radius	How blurry the shadow is (optional)	5px
Color	Shadow color	rgba(0,0,0,0.5)
Multiple shadows	Separate with commas	2px 2px 3px gray, -1px -1px 2px red

Key Takeaways

Use text-shadow with horizontal offset, vertical offset, blur radius, and color to add shadows to text.

Always include units like px for offsets and blur radius.

Choose shadow colors that contrast well with the text color for visibility.

Separate multiple shadows with commas to layer effects.

Keep blur radius moderate to keep shadows visible and soft.