CSS text-shadow (Text Shadows)

The text-shadow property adds shadows to text, enhancing readability or creating decorative effects. You can define:

• Horizontal offset – Moves the shadow left or right.
• Vertical offset – Moves the shadow up or down.
• Blur radius (optional) – Softens the shadow edges.
• Color (optional) – Sets the shadow color.

Syntax:

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

Example – Simple Text Shadow:

The heading looks bold and 3D.

<h1>Simple Text Shadow</h1>

h1 {
    font-size: 48px;
    text-align: center;
    color: #333;
    text-shadow: 5px 8px 8px rgba(0,0,0,0.4);
  }

Output :

Text Shadow with Color

A colored text shadow is a CSS effect where a shadow is applied to text with a specific color. It enhances the visibility of the text and makes it more visually striking.

<h1>Text Shadow with Color</h1>

 h1 {
    font-size: 48px;
    text-align: center;
    color: #333;
  text-shadow: 2px 3px red;
}

Output :

Text Shadow with Blur Effect

A blurred text shadow adds a softness to the shadow, giving a natural, glowing, or diffused appearance behind the text.

<h1>Text Shadow with Blur Effect</h1>

 h1 {
    font-size: 48px;
    text-align: center;
    color: #333;
  text-shadow: 2px 2px 5px red;
}

Output :

White Text with Black Shadow (For Readability)

A black shadow behind white text increases contrast, making text easier to read on complex backgrounds like images.

<h1>White Text with Black Shadow</h1>

 h1 {
    font-size: 48px;
    text-align: center;
    color: #f7f2f2;
    text-shadow: 2px 2px 5px #000000;
}

Output :

Neon Glow Effect

Neon text effects simulate glowing text using shadows with zero offsets and blur, giving the appearance of neon lighting.

<h1>Neon Glow Effect</h1>

h1 {
  text-shadow: 0 0 3px #ff0000;
}

Output :

Multiple Shadows

Multiple shadows are stacked using commas in CSS to create layered effects like depth, glow, or neon lighting.

<h1>Multiple Shadows</h1>

/* Red & Blue Glow */
h1 {
  text-shadow: 0 0 3px #a82424, 0 0 5px #4343e2;
}

Output :

Creating Text Borders Using Shadows

Text borders can be simulated using shadows on multiple sides of the text, creating an outline effect without extra HTML elements.

<h1>Creating Text Borders Using Shadows</h1>

h1 {
  color: red;
  text-shadow: -1px 0 black,
                0 1px black,
                1px 0 black,
                0 -1px black;
}

Output :