CSS Text Shadows

Adding text shadows in CSS

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

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:

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:

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

Available values

Notice that vertical and horizontal values can be negative:

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

Browser support

Mobile browser support