CSS Text Shadow

Example

Horizontal and vertical shadow:

{
text-shadow: 2px 2px;
}
Next, add a color (red) to the shadow:

Example

{
text-shadow: 2px 2px red;
}
Then, add a blur effect (5px) to the shadow:

Example

{
text-shadow: 2px 2px 5px red;
}

More Text Shadow Examples

Example

Text-shadow on a white text:

h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}

Example

Text-shadow with red neon glow:

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

Multiple Shadows

The text - shadow property also accepts multiple shadows for an element. Define each shadow in a comma - separated list.

Example

Text - shadow with red and blue neon glow:

h1 {
text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}

Example

Text - shadow with black, blue and red neon glow:

h1 {
color: white;

text - shadow: 1px 1px 2px black, 0 0 25px blue, 0

0 5px red;
}

Tip:

Tip:

The CSS Text Shadow Property

Property

Description text-shadow

Specifies the shadow effect added to text