CSS TEXT SHADOW

The text-shadow property adds a shadow behind text.

h1 {
  text-shadow: 2px 2px 5px gray;
}

Syntax

text-shadow: horizontal vertical blur color;

Example:

h1 {
  text-shadow: 3px 3px 5px black;
}
  • 3px → horizontal shadow position
  • 3px → vertical shadow position
  • 5px → blur amount
  • black → shadow color

Multiple shadows

h1 {
  text-shadow: 2px 2px 3px red,
               -2px -2px 3px blue;
}

Glow effect

h1 {
  color: white;
  text-shadow: 0 0 10px cyan;
}

Simple HTML + CSS

<h1>Welcome</h1>
h1 {
  color: white;
  text-shadow: 2px 2px 4px #000;
}

Comments