html

Text Shadow Effect in CSS

When designing a website make sure that the overall look of the website is aesthetically pleasing in order to enhance the user experience. For this purpose you can add images or text on your website, however, adding plain text only can have a negative impact on the user experience, therefore, to enhance the beauty of plain text you can add a shadow effect to it by using the CSS text-shadow property.

We have designed this tutorial to make you learn how you can make your plain text interesting in different ways by adding text shadows.

Let’s begin.

CSS Text Shadow

You can add a shadow on text appearing on web pages using the CSS text-shadow property. Here we going to demonstrate different ways that you can use to add shadow to your text.

Add Horizontal and Vertical Shadow

To add a shadow on a text horizontally and vertically simply give values of both the dimensions of the text-shadow property. Follow the example below.

HTML

<h1>Hello World</h1>

Here we have created a <h1> element and added some text in it.

CSS

h1 {
   text-shadow: 2px 2px;
   color: blue;
}

Using the text-shadow property we are giving 2px to both horizontal and vertical dimensions of the text. Additionally, we are providing blue color to the text as well.

Output

A horizontal and vertical shadow has been added to the text.

Adding color to the shadow

Another fun thing that you can do is add color along with the shadow to the text. Use the following code snippet.

CSS

h1 {
   text-shadow: 2px 2px blue;
}

Apart from giving some value to horizontal and vertical dimensions of the text we are also providing color of the shadow. This color is not applied to the shadow not the text.

Output

The shadow has been given the color blue.

Add a blur effect to the shadow

For the purpose of adding a blur effect to the shadow, you have to specify the blur intensity as the third value to the text-shadow property. Follow the code below.

CSS

h1 {
   text-shadow: 2px 2px 6px rgb(255,20,147);
}

In the above code, two values of the text-shadow property represent the length of horizontal and vertical shadow and the third value represents the intensity of the blur. We have also provided the shadow a deep pink color.

Output

The blur effect has been added successfully.

Add a glow effect to the shadow

To add a glow effect right behind the text, follow the example below.

CSS

h1 {
   text-shadow: 0 0 5px red;
}

In the above code snippet, to add a glowing effect we are assigning 0px to the horizontal and vertical dimensions of the text, moreover, giving some value to the blur radius along with red color.

Output

A glowing effect was added to the text.

Adding multiple shadows

To add numerous shadows on the text, you can add a list of shadows in the text-shadow property separated by commas.

CSS

h1 {
   text-shadow: 3px 3px 4px yellow, 4px 4px 6px purple;
}

In the above example, we are adding a yellow and purple shadow effect to the text.

Output

Multiple shadows have been added successfully.

Adding an outline to the text

To add an outline to the text using the text-shadow property, follow the example below:

CSS

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

In the above example, we have assigned a black color shadow with 1px right and down dimensions and -1px top and left dimensions.

Output

An outline has been added to the text.

Conclusion

To make your plain text interesting you can add a shadow effect to it by using the text-shadow property. For this purpose, you have to specify the length of the horizontal as well as the vertical dimension of the shadow in the text-shadow property. Besides just adding a shadow you can also add color, a blur effect or a glow effect to the text. It is also possible to add multiple shadows to the same text using the text-shadow property. In this guide, we have summed up various ways you can add a shadow effect to the text.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.