CSS text-shadow

The text-shadow property can be used to give beautiful shadow effects to your text. Using this property, you can give different types of shadow effects to the text of your HTML elements.

You can give values to mainly four parameters of this property which are given below.

CSS

text-shadow: [horizontal offset] [vertical offset] [blur radius] [color];

Values

These parameters are defined below.

1. horizontal offset (required) : This is the horizontal distance of the shadow from the text. A positive horizontal offset will place the shadow on the right side of the text while a negative horizontal offset will place the shadow on the left side of the text.
2. vertical offset (required) : This is the vertical distance of the shadow above or below the text. A positive vertical offset will place the shadow on the bottom side of the text while a negative vertical offset will place the shadow on the top side of the text.
3. blur radius (optional) : Giving blur radius makes the shadow blurred. A higher value of blur radius will make the shadow more blurred and extended, thus making it bigger and lighter. On the other hand, a smaller value of blur radius will result in a sharper, brighter and less extended shadow. Negative values are not allowed.
4. color (optional) : This specifies the color of the shadow.

Let's understand this with an example. The following code will change the font size and color of the text.

HTML

<p>Text Shadow</p>

CSS

p {
  font-family: 'Muli', sans-serif;
  font-size: 47px;
  font-weight: 900;
  color: #CFC547;
}

Now, let's draw a shadow for this text considering the effect of each of the above parameters.

horizontal offset

If you want shadow only on the left or right side of the text, then give the value of vertical offset 0.

To place the shadow on the right side of the text, give a positive horizontal offset value.

CSS

.text {
	text-shadow: 3px 0 rgba(81,67,21,0.8);
}

A negative value will place the shadow on the left side of the box.

CSS

.text {
	text-shadow: -3px 0 rgba(81,67,21,0.8);
}

See the Pen Setting horizontal offset for text shadows by Aakhya Singh (@aakhya) on CodePen.

In the above code, rgba(81,67,21,0.8) is the color of the shadow. If no shadow color is given, then the color of the text shadow will be the same as that of the text.

vertical offset

Same as in the above case, give 0 horizontal offset if you want the shadow to be only at the top or bottom of the text.

A positive vertical offset value will place the shadow on the bottom side of the text.

CSS

.text {
	text-shadow: 0 4px rgba(81,67,21,0.8);
}

A negative value will place the shadow on the upper side of the text.

CSS

.text {
	text-shadow: 0 -4px rgba(81,67,21,0.8);
}

See the Pen Setting vertical offset for text shadows by Aakhya Singh (@aakhya) on CodePen.

If you want a bottom-right shadow, then give both the horizontal offset and the vertical offset positive.

CSS

.text {
	text-shadow: 3px 4px rgba(81,67,21,0.8);
}

See the Pen Bottom-right text shadow by Aakhya Singh (@aakhya) on CodePen.

blur radius

Blurring makes a shadow look real. To give a blurred effect to the shadow, give it some positve blur radius.

CSS

.text {
	text-shadow: 3px 4px 7px rgba(81,67,21,0.8);
}

See the Pen Bottom-right blurred text shadow by Aakhya Singh (@aakhya) on CodePen.

color

You can give a color to the shadow by giving any color name or color value (like rgba or hsla). It gives a nice and a more natural look to the shadow if the opacity is set to a value less than 1 (as in the above case, where the opacity is set to 0.8).

Giving multiple shadows

You can also give more than one shadow to some text to give different shadow effects. These values are given, separated by commas, to the text-shadowproperty.

For example, consider the following code.

CSS

.text {
  text-shadow: 3px 0px 7px rgba(81,67,21,0.8), -3px 0px 7px rgba(81,67,21,0.8);
}

Here, two shadow values have been given to the text-shadow property, separated by comma. The first value will draw a shadow on the right side of the text, while the second one will draw a shadow on the left side of the text.

Consider some more examples where multiple shadows are given.

See the Pen Giving multiple text shadows by Aakhya Singh (@aakhya) on CodePen.

Global Values

Apart from specifying text shadows by giving different values to the text-shadow property, you can also give the following global values to this property.

initial : Sets the default value.

inherit : Inherits value from parent element.

Browser Support

This property has a good support from all the major browsers. However, it is partially supported in Opera Mini.