It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

CSS Text Shadows

Reading time 1 min
Published Aug 10, 2017
Updated Oct 2, 2019

Adding text shadows in CSS

By using the CSS text-shadow property, you can add a customized shadow to a text:

Example
h1 {
    text-shadow: 3px 3px #42bff4;
}
/* Gives a shadow for h1 header */

By combining multiple selectors, you can add the same type of shadow to multiple elements:

Example
h1, p, article {
   text-shadow: 4px 10px 8px pink;
}

CSS text-shadow property syntax

To add a CSS font shadow, you need to define from two to four values:

text-shadow: h-shadow v-shadow blur-radius color;

In the example below, you can see all four values defined. All of them will be explained in detail in the following section:

Example
h1 {    
    text-shadow: 3px 3px 9px #42bff4;
}

Available values

Value Description
h-shadow Required The horizontal CSS text shadow position
v-shadow Required The vertical CSS text shadow position
blur-radius Optional The radius of the blur (0 by default)
color Optional The color of the text shadow

Notice that vertical and horizontal values can be negative:

Example
h1 {
   text-shadow: 4px -10px 8px pink;
}

Browser support

Browser image
Chrome
2+
Browser image
Edge
12+
Browser image
Firefox
3.5+
Browser image
IE
10+
Browser image
Opera
9.5+
Browser image
Safari
1.1+

Mobile browser support

Browser image
Chrome
18+
Browser image
Firefox
4+
Browser image
Opera
-
Browser image
Safari
-