CSS text-shadow Property

The text-shadow property in CSS allows web designers to add shadow effects to text. This property is introduced as part of the CSS3 standard, and is supported by all the major browsers today.

The syntax for text-shadow is as follows:

text-shadow: offset-x offset-y blur-radius color

• offset-x: This is a mandatory field. The value indicates the amount of distance the shadow would extend to the right of the text. If the number is negative, it means the shadow would extend to the left of the text.
• offset-y: This is a mandatory field. The value indicates the amount of distance the shadow would extend below the text. If the number is negative, it means the shadow would extend above the text.
• blur-radius: This is an optional field. If left unspecified, the default value is 0. A large blur-radius value means that the shadow would be blurry, and a small blur-radius means that the shadow would be sharp. Only non-negative numbers are allowed.
• color: This is an optional field. This is the color code. It can be specified in hexadecimal code, RGB, or color name. If no color is specified, the text shadow will have the same color as the text.

Note that the order of the values is important. For example, offset-x always occurs before offset-y. In addition, while the box-shadow property has a spread-radius value, text-shadow does not.

Example 1

CSS declaration:

#ex1 { font-size: 24px; text-shadow: 5px 5px #999; }

The following HTML,

<p><div id="ex1"> Text-shadow property example 1. </div>

renders,

Notice the text shadow extends to the right of the text by 5px and below the text by 5px.

Example 2: Negative offset values

CSS declaration:

#ex2 { font-size: 24px; text-shadow: -10px -10px #999; }

The following HTML,

<p><div id="ex2"> Text-shadow property example 2. </div>

renders,

Notice the text shadow extends to the left of the text by 10px and above the text by 10px.

Example 3: Blur radius

CSS declaration:

#ex3 { font-size: 24px; text-shadow: 5px 5px 3px #999; }

The following HTML,

<p><div id="ex3"> Text-shadow property example 3. </div>

renders,

Notice that by setting blur-radius to 3px, now the shadow is blurry and no longer sharp.

Example 4: Multiple shadows

CSS declaration:

#ex4 { font-size: 24px; text-shadow: 5px 5px #999, -3px -3px pink; }

The following HTML,

<p><div id="ex4"> Text-shadow property example 4. </div>

renders,

Notice the presence of two shadows, one to the upper-left of the text, and the other to the lower-right of the text.