Text shadow

Sometimes in CSS it is necessary to modify the way the text looks: we can give it depth, volume, and make certain words stand out from the rest of the text. This can be done by using the text-shadow property. This property, as you might've guessed from its name, adds a shadow to the text. The shadow can be set using various parameters.

Text-shadow syntax

The text-shadow syntax in general looks like this:

text-element {
   text-shadow: x-shadow y-shadow radius color;
}

The text-shadow property can accept the following parameters as values:

• x-shadow is a mandatory parameter. It is responsible for the horizontal shift of the shadow relative to the text. A positive value of this parameter sets the shadow shift to the right, a negative value sets the shadow shift to the left;

• y-shadow is also a mandatory parameter. It is responsible for the vertical shift of the shadow in relation to the text. If you use a negative value, the shadow will shift upwards.

• radius sets the shadow blur radius. The larger this value is, the smoother, wider, and brighter is the shadow. This parameter is considered optional. If this parameter is not set, it is set to 0 by default;

• color sets the color of the shadow. By default, the shadow color is the same as the text color. This parameter is considered optional;

• Instead of the parameters listed above, you can set none. This parameter is used to cancel the addition of shadows.

To better understand how it works, take a look at the following code:

<h1>Text-shadow</h1>

h1 {
    text-shadow: 2px 0px 2px green;
}

Its result will look like this:

If you want more color, it is also possible to indicate several shadows divided by commas. Here's an example of this kind of style:

h1 {
    text-shadow: 2px 0px 2px green, 2px 0px 4px yellow;
}

As a result, we get two shadows, one blending into another:

Examples

Let's take a look at some specific examples of the text-shadow property and learn how to get different kinds of effects with it.

A simple shadow cast to the bottom right can be created with the following syntax:

h1 {
    text-shadow: 4px 2px 2px black; 
    color: #ece2ca;
}

Notice that the x,y values here are positive. The shadow will fall in the opposite direction if we make these values negative:

h1 {
    text-shadow: -4px -2px 2px black;
    color: #ece2ca;
}

Can you spot the difference? In the first case, the text has the shadow in the bottom right, while in the second case it's in the top left.

You can make a visible outline of the text by setting two shadows that are not very wide: one on the top left, and another on the bottom right:

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

To make the dark letters extra bulgy, you can add two shadows, a light one and a dark one:

h1 {
    text-shadow: -2px -2px 0 #ece2ca, -4px -4px 0 #5a5a5a;
    color: #5a5a5a;
}

If you skip some of the parameters, the values will be set by default:

h1 {
    text-shadow: 4px 4px;
}

Conclusion

In this topic we've considered a new CSS property text-shadow, reviewed its syntax and saw some creative examples of its usage. When using the property, remember to keep the text readable and visually appealing to the end users.