CSS - Add shadows to text.

CSS to Add Shadows to Text

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • 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.

Examples

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.

HTML

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

CSS

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

Output

CSS to Add Shadows to Text Example

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

Notes

  • 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: