CSS - Add shadows to text.

CSS to Add Shadows to Text

  • CSS
  • 2 mins read

In this tutorial, you will learn how to use CSS to add shadows to text.

Before CSS3, you had to use an image to display text with shadows. But now, CSS3 offers the text-shadow property for this purpose.

Syntax for text-shadow

text-shadow: horizontalOffset verticalOffset blurRadius shadowColor;

As the syntax shows, you can set four parameters for it.

The first one specifies how much the shadow should be offset to the right (a positive value) or left (a negative value).

The second one specifies how much the shadow should be offset down (a positive value) or up (a negative value).

The third one specifies how big the blur radius for the shadow should be.

The fourth one specifies the color of the shadow.


The following example will add the shadows to text that is 2 pixels to the right and down, with no blur and the shadow color is gray.


<h1>CSS to Add Shadows to Text Example</h1>


h1 {color: red; text-shadow: 2px 2px #aaa;}


CSS to Add Shadows to Text Example

Remember the visually-impaired. Too much shadow or blur makes text harder to read.


  • Positive values offset the shadow to the right or down. Negative values offset the shadows to the left or up.
  • The blur radius determines how much the shadow is blurred.
  • All modern browsers support the text-shadow property.
  • If a browser doesn't support this property, it is ignored so there is no shadow, which is usually okay.

See also: