Create CSS text shadow: 4 online demos

The text shadow property in CSS

The text-shadow property, as the name shows, is used to give shadows in the text of the web pages.  Normally, you will use text shadows in headings or any other text to make it prominent. You may also add animation based on CSS to the shadows to even stand it out more. I will show you demos of using shadows in this tutorial, so keep reading.

You may also add animation based on CSS to the shadows to even stand it out more. I will show you demos of using shadows in this tutorial, so keep reading.

How to use CSS text-shadow property?

The simple syntax to use the text-shadow property is:

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

Where the horizontal and vertical shadow values are required while blur and color are optional.

A demo of text-shadow property

In this demo, the text-shadow property is used twice for defining the shadow of text in the div element. For proper text shadow, a few other CSS properties like background color, font-size, font weight etc. are also used. The first set of values in text-shadow applies the shadow on top, have a look:

See online demo and code

The CSS:

The markup:

Style number 2 for text-shadow

In this demo, the CSS shadow property is used many times for creating the shadow. That way, you may provide different colors at different points, have a look:

See online demo and code

The CSS:

Style number 3 of shadow effect

See this shadow effect where text looks broken or in dashed way by using the white color for the color property and different colors for shadow property:

See online demo and code

The CSS:

Text shadow style number 4 using RGB

In this example, the RGB color codes are used in the shadow CSS property. See the code and output by clicking the image or link below:

See online demo and code

Get the complete code from the demo page.