Text Shadow in CSS

Subject: css

Text Shadow in CSS

The text-shadow property in CSS allows you to apply shadow effects to text, making it more stylish, readable, and visually engaging. It's a simple yet powerful tool for improving typography in web design.

Syntax

🚀 Try it in Compiler

Parameters:

  • horizontal-offset: Moves the shadow left (-) or right (+)
  • vertical-offset: Moves the shadow up (-) or down (+)
  • blur-radius (optional): Determines how soft or sharp the shadow is
  • color: The shadow’s color in HEX, RGB, RGBA, or named format

Example 1: Basic Text Shadow

🚀 Try it in Compiler

This applies a gray shadow 2px right and 2px down from the text, with a 4px blur.

Example 2: Colored Glow Effect

🚀 Try it in Compiler

Here, multiple shadows are layered to create a glowing effect.

Example 3: Outline or Stroke Effect

🚀 Try it in Compiler

Creates a faux text outline by layering shadows in all directions. Useful for contrast over images or gradients.

Example 4: Multi-Directional Shadow

🚀 Try it in Compiler

Adds red shadow bottom-right and blue shadow top-left for depth.

Accessibility Tip

When applying shadows to text:

  • Ensure good color contrast with the background
  • Avoid overuse that could impact readability
  • Use subtle shadows for better UX on small screens

Key Takeaways

  • text-shadow enhances typography with depth, glow, or outline effects
  • You can define offset, blur, and color to control the look
  • Use multiple shadows for glowing, outlined, or layered effects
  • Combine with backgrounds for impactful visual design
  • Always test shadow readability across devices and themes
Next: Box Shadow in CSS