Definition and Usage

The text-shadow property specifies a shadow effect applied to text characters.

  • This overview covers the key features of this property and how to implement it.
  • It also explains how to work with multiple shadow declarations.
  • In addition, several examples demonstrate how to use text-shadow effectively.

Basic Example

CSS Live Demo: text-shadow Click the demo button below!

Formal syntax

CSS 
selector {
    text-shadow: /* value */
}

Syntax

CSS 
/*
 * <offset-x> (required): The horizontal distance along the x-axis.
 *                        Accepts positive, zero, and negative values.
 *                        Length values only (percentage values are not allowed).
 *
 * <offset-y> (required): The vertical distance along the y-axis.
 *                        Accepts positive, zero, and negative values.
 *                        Length values only (percentage values are not allowed).
 *
 * <blur-radius> (optional): The blur effect. Measured as the radius of the blur circle.
 *                           Accepts positive and zero values; negative values are not allowed.
 *                           Initial value is 0. Length values only (percentage values are not allowed).
 *
 * <color> (optional): The shadow color.  
 *                     The initial value is currentcolor (the current text color).
 */

/* Note! <blur-radius> or <color> cannot appear between <offset-x> and <offset-y>. */
/* Note! <blur-radius> must immediately follow <offset-y>. */
/* Note! <color> cannot be placed between <offset-x>, <offset-y>, or <blur-radius>. */

/* <offset-x> | <offset-y> | <blur-radius> | <color> */
text-shadow: 2px 3px 4px red;

/* <color> | <offset-x> | <offset-y> | <blur-radius> */
text-shadow: red 2px 0 4px;

/* <offset-x> | <offset-y> | <color> */
text-shadow: 5px 5px #00a0e9;

/* <color> | <offset-x> | <offset-y> */
text-shadow: green 2px 5px;

/*
 * <offset-x> | <offset-y>
 * When <color> and <blur-radius> are omitted, their initial values are used.
 */
text-shadow: 5px 10px;

/*
 * Multiple shadows are added by separating each set of values with a comma (,).
 * Shadows are applied in order from front to back.
 * The first shadow appears on top.
 */
text-shadow: red 2px 0 4px, blue 4px 0 4px, green 6px 8px;

/* Initial value */
text-shadow: none; /* No shadow effect is applied */

/* Global values */
text-shadow: inherit;
text-shadow: initial;
text-shadow: revert;
text-shadow: revert-layer;
text-shadow: unset;

Values

Accepted values for the text-shadow property
none Initial value.
No shadow effect is applied.
<color> Optional.
Specifies the shadow color.
The initial value is currentcolor (the current text color).
It can be placed either at the beginning or the end of the value.
<offset-x> <offset-y> Required.
These length values determine the distance of the shadow from the text.
  • <offset-x> specifies the horizontal distance along the x-axis. Negative values place the shadow to the left of the text.
  • <offset-y> specifies the vertical distance along the y-axis. Negative values place the shadow above the text.
<offset-x> and <offset-y> must be separated by a space, and neither <color> nor <blur-radius> can appear between them. Percentage (%) values are not allowed for these lengths.
<blur-radius> Optional.
Specifies the blur effect. The value represents the radius of the blur circle; higher values produce a larger and softer shadow. Negative values and percentage (%) units are not allowed.
The initial value is 0.
This value must appear immediately after <offset-y>.

Formal definition

Formal definition of the text-shadow property
Initial value none
Percentages n/a
Applies to all elements
Inherited yes
Animatable yes

Features of the text-shadow Property

The text-shadow property has the following features:

  1. Unlike box-shadow, the shadow is not clipped by the shape of the element box.
  2. Like box-shadow, it does not affect the layout.
  3. It applies a shadow effect to text-decoration.
  4. It applies a shadow effect to text-emphasis.

Let's take a closer look at each of these four features.

Unlike box-shadow, the shadow is not clipped by the element's shape

While box-shadow is clipped according to the shape of the element box, text-shadow is not clipped by the text outline. When the text is transparent or partially transparent, the shadow may show through.

Consider the following example:

HTML 
<style>
    .box {
        width: 200px;
        height: 100px;
        background-color: transparent;
        box-shadow: 10px 10px 10px yellowgreen;
    }
</style>
<div class="box">BOX</div>
Rendered Output

In this example, the element box is transparent, so you can see that the shadow created by box-shadow is clipped by the shape of the element box. However, in the next example, the shadow created by text-shadow is not clipped, and when the text is transparent or partially transparent, the shadow shows through.

HTML 
<style>
    .text {
        font-size: 70px;
        font-weight: 900;
        color: rgba(0, 0, 0, 0.4);
        text-shadow: 5px 5px red;
    }
</style>
<p class="text">TEXT</p>
Rendered Output

Like box-shadow, it does not affect the layout

Even when the shadow created by box-shadow or text-shadow reaches or overlaps surrounding elements, it does not affect the layout. Even when the shadow overflows, it does not affect scrolling.

HTML 
<style>
    .box {
        width: 200px;
        height: 100px;
        background-color: gold;
    }
    .box-1 {
        margin-bottom: 25px;
    }
    .box-2 {
        box-shadow: 0 -50px 20px rgba(0, 0, 0, 0.7);
    }
</style>
<div class="box box-1">BOX 1</div>
<div class="box box-2">BOX 2</div>
Rendered Output

In this example, the box-shadow of .box-2 extends upward and overlaps .box-1, but neither element is pushed or shifted. The shadow has no influence on the surrounding layout.

The following example demonstrates that text-shadow behaves the same way as box-shadow—it does not affect the surrounding layout.

HTML 
<style>
    .text {
        font-size: 70px;
        font-weight: 900;
        color: gold;
    }
    .text-1 {
        margin-bottom: 10px;
    }
    .text-2 {
        text-shadow: 0 -50px 10px rgba(0, 0, 0, 0.4);
    }
</style>
<p class="text text-1">TEXT 1</p>
<p class="text text-2">TEXT 2</p>
Rendered Output

It applies a shadow effect to text-decoration

The text-shadow property also affects text-decoration.

HTML 
<style>
    .text {
        font-size: 70px;
        font-weight: 900;
        color: gold;
        text-decoration: underline;
        text-shadow: 5px 5px red;
    }
</style>
<p class="text">TEXT</p>
Rendered Output

In this example, when text-decoration: underline is applied to the text, the shadow created by text-shadow is also applied to the underline. This behavior is consistent across all values of the text-decoration-style property.

It applies a shadow effect to text-emphasis

The text-shadow property also affects text-emphasis.

HTML 
<style>
    .text {
        font-size: 70px;
        font-weight: 900;
        color: gold;
        text-emphasis: dot;
        text-shadow: 5px 5px red;
    }
</style>
<p class="text">TEXT</p>
Rendered Output

In this example, when text-emphasis: dot is applied to the text, the shadow created by text-shadow is also applied to the dot. This behavior is consistent across all values of the text-emphasis-style property.

Applying Multiple Text Shadows with text-shadow

You can apply multiple text-shadow effects by adding each value separated by commas. The shadows are rendered in order, from front to back, meaning the first shadow appears on top.

HTML 
<style>
    .text {
        font-size: 100px;
        font-weight: 900;
        color: gold;
        text-shadow: 7px 7px red,
                     14px 14px green,
                     21px 21px blue;
    }
</style>
<p class="text">A</p>
Rendered Output

The example above shows that the shadows are applied in order—red, green, then blue—rendered from front to back, with the first shadow (red) appearing on top.

Browser compatibility

Browser compatibility for the text-shadow property
Property
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
text-shadow 2 12 3.5 1.1

Specifications

Specification for the text-shadow property
Specification
text-shadow CSS Text Decoration Module Level 4
#text-shadow-property

References

See also