📌 Introduction

The text-shadow property in CSS adds shadow effects to text, allowing you to create depth, glow, highlights, neon effects, embossed looks, and more. It works similarly to box-shadow but applies only to text characters. A powerful tool for modern UI and creative typography! 🎨✨

🎯 What Does text-shadow Do?

✨ Syntax

text-shadow: <offset-x> <offset-y> <blur-radius> <color>;

🧩 Value Breakdown

1. offset-x (required)

Horizontal shadow position → positive = right, negative = left.

2. offset-y (required)

Vertical shadow position → positive = down, negative = up.

3. blur-radius (optional)

Controls the softness of the shadow. Higher values produce smoother shadows.

4. color (optional)

Can use HEX, RGB, RGBA, HSL, etc. Use RGBA for transparency.

🔥 Basic Examples

1. Simple Text Shadow

.simple {
  text-shadow: 2px 2px 2px rgba(0,0,0,0.3);
}

2. Sharp Text Shadow

.sharp {
  text-shadow: 3px 3px 0px black;
}

3. Soft Glow Effect

.glow {
  text-shadow: 0 0 10px rgba(0, 150, 255, 0.8);
}

4. Multiple Shadows (Layered)

.multi {
  text-shadow:
    0 1px 2px rgba(0,0,0,0.2),
    0 2px 5px rgba(0,0,0,0.15);
}

🔥 Advanced Creative Examples

1. Neon Text Effect

.neon {
  color: #fff;
  text-shadow:
    0 0 5px #0ff,
    0 0 10px #0ff,
    0 0 20px #0ff,
    0 0 40px cyan;
}

2. 3D Text Effect

.threeD {
  text-shadow:
    2px 2px 0 #999,
    4px 4px 0 #666,
    6px 6px 0 #333;
}

3. Embossed / Debossed Effect

.embossed {
  color: #333;
  text-shadow:
    1px 1px 0 #fff,
    -1px -1px 0 #aaa;
}

4. Outline Text Using Shadows

.outline {
  color: transparent;
  text-shadow:
    1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000;
}

5. Retro Pixel Shadow

.pixel {
  text-shadow: 4px 4px 0 #000;
}

📊 Example Comparison Table

🧠 Tips for Better Text Shadows

🎉 Conclusion

The text-shadow property is a powerful tool for creating beautiful text effects—from glowing neon signs to 3D lettering and elegant soft shadows. Mastering offsets, blur levels, and multiple shadow layers will help you produce professional, attention-grabbing typography in your UI designs. 🚀