CSS Text Shadow Generator CSS Text Shadow Generator

Text Color
Background Color
Multiple Shadows
  • 1
  • +
Shadow Options
3 px
3 px
2 px
1
Shadow Preview
Preview Text

Text Shadow CSS Property

The CSS text shadow property is used to add a shadow to the text. Multiple property parameters can be specified, separated by a comma.


Each shadow applies to the text of the element, as well as to all styles (for example, underlining) of the text.

Shadows are applied in the following order: the first shadow is located at the very top. Therefore, shadows can overlap each other, but they are never placed on top of the text.

Each shadow is usually given two or three length values (third is optional), and optionally a color. If you don't specify a color, the shadow will automatically inherit the text color. The color can be set using various formats (including RGB and HSL). We recommend specifying the color in rgba format, since it has some advantages over the hexadecimal colors. For example, this format allows you to use another value. This way, you can adjust not only the location, blur and color of the shadow, but also the opacity level (the same applies to the hsla format).

Syntax

The property takes on a composite value of four different parts: horizontal offset, vertical offset, blur and shadow color.

text-shadow: offset-x offset-y blur color;