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.