CSS text-shadow Property

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-shadowSpecifies the length of horizontal shadow. It can accept a positive, zero, or negative value.
vertical-shadowSpecifies the length of vertical shadow. It can accept a positive, zero, or negative value.
blur-radiusSpecifies blur radius. The blur effect increases with blur-radius. By default, no blur effect is added to the shadow. The default value is zero.
colorSpecifies 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.
noneDefines no shadow. This is the default value.
initialSets the text-shadow property to its default value(none).
inheritInherits the text-shadow property from the parent element.

General Info

Default Valuenone
InheritedYes
JavaScript Usageelement.style.textShadow = “1px 2px 3px red”

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.