text-shadow
Overview
The text-shadow property is utilized for adding shadow effects to text elements. It accepts a series of shadow effects, separated by commas, applied to both the text and its decorations. The shadows are applied in front-to-back order, with the first shadow on top, and they can overlay each other but never the text itself.
Each shadow is defined by two to three length values, specifying the x and y offset of the element and an optional blur value. The x-offset indicates the horizontal distance, while the y-offset represents the vertical distance. Additionally, an optional color value can be included, offering a wide range of customization options for the shadow effect.
Note:
text-shadowcan also be applied to both::first-lineand::first-letterpseudo-elements.
Examples and Usage
The text-shadow property offers various ways to create diverse effects on text elements, such as using only the required x and y offset values or incorporating blur and color values for more sophisticated results. Let's observe three examples that highlight these different aspects.
Basic Shadow with X and Y Offset
In the first example, we'll apply a simple shadow to the text using only the x and y offset values.
<p class="basic-shadow">This is a basic text-shadow example.</p>
.basic-shadow {
/* Apply a text shadow with x and y offset values */
text-shadow: 1px 1px;
}
Here, we used a shadow with only the required x and y offset values. The shadow is positioned 1px to the right and 1px below the text. Since no color or blur is specified, the default user agent color is applied.
Shadow with Color and Blur
Our second example demonstrates how to apply a shadow with blur and a custom color using the RGBA format.
<div class="txt-shadow">
Web Reference
</div>
.txt-shadow {
font-family: 'UI Monospace', monospace;
font-size: 5rem;
text-align: center;
color: #CD3333;
background-color: #FBBF24;
/* Apply a text shadow with x, y offset values, blur, and RGBA color */
text-shadow: 3px 2px 2px rgba(128, 0, 0, 1);
}
Specifically, the shadow is positioned 3px to the right and 2px below the text, with a 2px blur radius. The color is specified using the rgba() function, allowing the inclusion of an alpha value to control the opacity.
Multiple Shadows
In the last example, we'll create a text effect with multiple shadows applied to the same element.
<p class="txt-shadow">A sentence with multiple shadows</p>
.txt-shadow {
/* Apply two text shadows with varying x, y offset values, blur, and RGBA color */
text-shadow: 40px 20px 2px rgba(137, 196, 244, 1),
20px 10px 1px rgba(137, 196, 244, 1);
}
With this approach, the first shadow is positioned 40px to the right and 20px below the text, with a 2px blur radius. The second shadow is positioned 20px to the right and 10px below the text, with a 1px blur radius. Both shadows share the same color, defined using the rgba() function.
Values
The text-shadow property can accept the following values:
| Value | Description |
|---|---|
<color> | Can be placed either before or after the offset values. If the color isn't specified, the user agent will select a color. (Optional) |
<offset-x> <offset-y> | The <length> values determine the shadow's offset from the text. <offset-x> defines the horizontal distance, with negative values moving the shadow left of the text. <offset-y> defines the vertical distance, with negative values moving the shadow above the text. If the values are 0, the shadow is positioned behind the text. (Required) |
<blur-radius> | An optional <length> value that, if not provided, defaults to 0. Increasing this value results in a larger blur, causing the shadow to appear broader and lighter. |
Associated Properties
box-shadowcolortext-decoration
Tips and Tricks
When using
text-shadow, consider using RGBA or HSLA color formats to take advantage of the alpha channel, which allows you to set the opacity of the shadow.If you don't specify a color for the
text-shadow, the user agent will choose a color for you. To ensure consistency across browsers, it's recommended to explicitly specify a color.Be mindful of the readability of your text when applying shadows, especially when using multiple shadows or complex designs.
Unlike
box-shadow, thetext-shadowproperty doesn't provide a "spread" value.For accessibility purposes, ensure that your text remains legible for users with visual impairments or color blindness. High contrast between the text and its background is essential.
Shadow generators, such as online tools or CSS libraries, can help you create complex and visually appealing text-shadow effects without the need to manually write the code. These tools often provide a user-friendly interface, allowing you to experiment with different shadow settings and preview the results in real time.
Browser Compatibility
Partial support in Safari 3.1-3.2 is due to the lack of support for multiple shadows. Internet Explorer 10 and later versions support a fourth length value for the shadow's "spread," which is not yet part of the official specification.
| Browser | Chrome | Edge | Safari | Firefox | Opera | Internet Explorer |
|---|---|---|---|---|---|---|
| Support | Yes | Yes* | Yes* | Yes* | Yes | Yes* |
Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers. (see more specifics in the Useful Resources below)