3 examples to learn 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.

>>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.

Syntax of CSS text shadow

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 CSS 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 text-shadow CSS property. See demo by clicking the link:

Experience this example online

Adding shadow color to text-shadow

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

Experience this example online

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

Also see CSS text

Was this article helpful?

Related Articles

Leave A Comment?