How to Add 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 has four parts:

• 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's color.

You can add multiple shadows separated by commas.

css

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

Example

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

css

html {
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
  text-shadow: 2px 2px 4px gray;
}

Output

A heading 'Hello World' with a soft gray shadow slightly offset to the bottom right.

Common Pitfalls

Common mistakes include:

• Forgetting units like px for offsets and blur.
• Using too large blur radius, making shadow invisible.
• Not specifying color, which defaults to the text color and may not show.
• Using negative blur radius, which is invalid.

Always check your values and test in the browser.

css

/* Wrong: missing units and negative blur */
h1 {
  text-shadow: 2 2 -3 black;
}

/* Correct: units added and blur positive */
h1 {
  text-shadow: 2px 2px 3px black;
}

Quick Reference

Property	Description	Example
Horizontal offset	Moves shadow left/right	2px
Vertical offset	Moves shadow up/down	2px
Blur radius	Softness of shadow edges	4px
Color	Shadow color	rgba(0,0,0,0.3)
Multiple shadows	Separate with commas	2px 2px 3px black, -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.

Avoid negative blur radius as it is invalid and will not work.

You can add multiple shadows by separating them with commas.

Test your shadows in the browser to ensure they look good and are visible.