In this section, we will learn what the text-shadow property is and how to use it in CSS.

Click here to run the text-shadow property.

CSS text-shadow Property Definition and Usage

Adding shadows to a text is another way of making a text attractive and bring attention to it.

In CSS, there’s a property that can be used exactly for this purpose and is called `text-shadow`.

CSS text-shadow Property Syntax

text-shadow: horizontal-position vertical-position blurriness color;

CSS text-shadow Property Value

• Horizontal-position: the first value we set for this property is the position of the shadow horizontally. It can be negative or positive value like 4px or -2em etc. Negative values position the shadow towards the left side of the text and positive values position the shadow toward the right side of the text.
• Vertical-position: the second value we set for this property is the position of the shadow vertically. The value can be negative or positive like 4px or -4px etc. Negative values position the shadow toward the top side of the text and positive values position the shadow toward the bottom side of the text.
• Blurriness: Using this value, we can control how blurry or sharp the shadow should be. Sample values: 3px, 10px, 1em, etc.

Note: this value is optional and if it’s omitted, the shadow will have a very sharp edge.

• Color: the last value for this property sets the color of the shadow. We can use named-color, RGB, Hex and HSL.

Note: By default, the value of this property is none.

Note: you can also add a multiple type of shadow to this property separating each using a comma ‘,’.

Example: text-shadow in CSS

See the Pen text-shadow in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

Example: CSS text drop shadow

See the Pen CSS text drop shadow by Omid Dehghan (@enjoytutorials1) on CodePen.