CSS text-shadow property is used to add shadows to the text.
To apply the shadow effect, you have to pass below four parameters to the text-shadow property:
- horizontal-shadow
- vertical-shadow
- blur radius(optional)
- shadow color(optional)
The example below applies the basic shadow to <h1> and <h2> tags.
Example:
h1{
text-shadow: 1px 2px red;
}
h2{
text-shadow: 2px 2px orange;
}
The example below adds a blur effect to the shadow:
Example:
h2.without-blur{
text-shadow: 1px 2px red;
}
h2.with-blur{
text-shadow: 1px 2px 3px red;
}
If the text-shadow color is not specified, the current color of the element is used as the text-shadow color. See the example below:
Example:
h1{
text-shadow: 1px 2px;
}
h2{
color: green;
text-shadow: 2px 2px 4px;
}
CSS Syntax
The text-shadow property has the following syntax:
text-shadow: horizontal-shadow vertical-shadow blur-radius color|none|initial|inherit;
Property Values
The text-shadow property accepts the following values:
| horizontal-shadow | Specifies the length of horizontal shadow. It can accept a positive, zero, or negative value. |
| vertical-shadow | Specifies the length of vertical shadow. It can accept a positive, zero, or negative value. |
| blur-radius | Specifies blur radius. The blur effect increases with blur-radius. By default, no blur effect is added to the shadow. The default value is zero. |
| color | Specifies the color of the text-shadow. The color value can be specified in any valid CSS color formats like ‘color name’, ‘hex’, ‘rgb’, ‘hsl’, etc. By default, the shadow color is the same as the current color of the text. |
| none | Defines no shadow. This is the default value. |
| initial | Sets the text-shadow property to its default value(none). |
| inherit | Inherits the text-shadow property from the parent element. |
General Info
| Default Value | none |
| Inherited | Yes |
| JavaScript Usage | element.style.textShadow = “1px 2px 3px red” |
