CSS text-shadow Property
The CSS text-shadow property adds one or more shadows to text using horizontal and vertical offsets, an optional blur radius, and a color.
Text shadows can create subtle depth, improve the appearance of headings, or produce more decorative text effects. Multiple shadows can also be combined in a single declaration.
text-shadow Syntax
A text shadow requires horizontal and vertical offset values. A blur radius and color can also be included.
h2 {
text-shadow: 2px 2px 4px #999999;
}The values in this example specify a 2px horizontal offset, a 2px vertical offset, a 4px blur radius, and the shadow color.
Shadow Offsets
The first two length values control the position of the shadow. The first value is the horizontal offset and the second is the vertical offset.
h2 {
text-shadow: 3px 5px #999999;
}A positive horizontal offset moves the shadow to the right, while a positive vertical offset moves it downward.
Blur Radius
An optional third length sets the blur radius. A value of 0 creates a sharp shadow, while larger values make the shadow softer and spread the blur over a larger area.
h2 {
text-shadow: 2px 2px 8px #999999;
}The blur radius cannot be negative.
Shadow Color
A color can be included with each text shadow. CSS color formats such as named colors, HEX, RGB, HSL, and colors with alpha transparency can be used.
h2 {
text-shadow: 2px 2px 4px rgb(0 0 0 / 40%);
}Using an alpha value can create a softer shadow by allowing the background behind the shadow to remain partially visible.
Negative Offsets
Horizontal and vertical offsets can be negative. A negative horizontal offset moves the shadow to the left, while a negative vertical offset moves it upward.
h2 {
text-shadow: -3px -3px 4px #999999;
}Positive and negative values can be combined to place the shadow in different directions around the text.
Multiple Text Shadows
Multiple shadows can be applied to the same text by separating each shadow with a comma. The shadows are layered in the order they are written, with the first shadow drawn on top.
h2 {
text-shadow: 2px 2px 3px #999999, -2px -2px 3px #cccccc;
}Combining shadows makes it possible to create outlines, glow effects, layered shadows, and other decorative treatments.
Removing a Text Shadow
The none value removes text shadows from an element. It is also the initial value of the text-shadow property.
h2 {
text-shadow: none;
}This can be useful when overriding a shadow applied by another CSS rule.
Text Shadows and Readability
Text shadows should generally support the appearance of the text without making it harder to read. Large blur values, strong colors, or several overlapping shadows can reduce character clarity.
A text shadow should also not be relied on as the only way to provide sufficient contrast between text and its background. The text color and background should provide readable contrast on their own.
text-shadow Example
The following example adds a gray shadow to a heading. Open the example in the editor and change the horizontal offset, vertical offset, blur radius, or color. Try negative offsets, a larger blur radius, another CSS color value, or add a second shadow separated by a comma, then run the code to compare the results.
h2 {
text-shadow: 2px 2px 4px #999999;
}