3 Examples to Understand CSS text shadow Property

The text-shadow property

To make text looking prominent and beautiful, CSS comes up with the text-shadow property. If CSS text-shadow property is used properly, this may enable you to avoid using images in the web page for text styling for certain scenarios.

>>See an example of text-shadow

Note: IE 9 and earlier browsers do not support the text-shadow property.

The text-shadow property takes four values out of which two are required and two are optional. This is explained in the following section.

A Short Video of text-shadow property

How to use the CSS text-shadow property

Following is the general syntax of using the text-shadow CSS property.

text-shadow: horizontal-shadow vertical-shadow blur color;

The horizontal and vertical shadow values are required while blur and color are optional. The Color value defines the shadow of the text.

Horizontal and vertical shadows example

This example uses the horizontal and vertical shadow values in heading (h1 tag) text. As no color value is specified in the text-shadow property, it will take text’s color for the shadow.

Experience this example online

A text-shadow example with blur value

We will use the same example as above and just add the Blur value in the text-shadow property. See the demo by clicking the link or image below:

CSS text shadow blur

Experience this example online

Adding shadow color in text-shadow

This example applies all four values, including the shadow color to the heading 1 and heading 2 texts.

CSS text-shadow

Experience this example online

Similarly, you may create CSS based shadows in div, paragraphs and other elements of HTML.

See Also: CSS text