Definition and Usage

The box-shadow property specifies a shadow effect applied to element boxes.

  • 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 box-shadow effectively.

Basic Example

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

To apply a shadow effect to text characters, use the text-shadow property.

Formal syntax

CSS 
selector {
    box-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.
 *                           The initial value is 0. Length values only (percentage values are not allowed).
 *
 * <spread-radius> (optional): The size expansion or contraction of the shadow.
 *                             Positive values expand and enlarge the shadow,
 *                             while negative values contract it.
 *
 * <color> (optional): The shadow color.
 *                     The initial value is currentcolor (the current text color).
 *
 * <inset> (optional): Changes the shadow from an outer shadow to an inner shadow.
 */

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

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

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

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

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

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

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

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

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

/*
 * <offset-x> | <offset-y>
 * When <color>, <blur-radius>, and <spread-radius> are omitted,
 * their initial values are used.
 */
box-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.
 */
box-shadow: red 2px 0 4px, blue 4px 0 4px, green 6px 8px;

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

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

Values

Accepted values for the box-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).
This value cannot be placed between <offset-x>, <offset-y>, <blur-radius>, or <spread-radius>.
<offset-x> <offset-y> Required.
These length values specify the distance of the shadow from the element box.
  • <offset-x> specifies the horizontal distance along the x-axis. Negative values place the shadow to the left of the element box.
  • <offset-y> specifies the vertical distance along the y-axis. Negative values place the shadow above the element box.
<offset-x> and <offset-y> must be separated by a space, and neither <color>, <blur-radius>, <spread-radius>, nor <inset> can appear between them. Percentage (%) values are not allowed for either length.
<blur-radius> Optional.
Specifies the blur effect. The value represents the radius of the blur circle; higher values produce a larger and softer shadow. Percentage (%) units and negative values are not allowed.
The initial value is 0.
This value must appear immediately after <offset-y>.
<spread-radius> Optional.
Specifies how much the shadow expands or contracts.
Positive values expand the shadow and make it larger, while negative values contract it.
The initial value is 0.
This value must appear immediately after <blur-radius>.
See Tips for using the <spread-radius> value of box-shadow.
<inset> Optional.
Changes the shadow from an outer shadow to an inner shadow.
When omitted, an outer shadow is applied.
This value cannot be placed between <offset-x>, <offset-y>, <blur-radius>, or <spread-radius>.

Formal definition

Formal definition of the box-shadow property
Initial value none
Percentages n/a
Applies to all elements
Inherited no
Animatable All values except <inset>, including
<offset-x>, <offset-y>, <blur-radius>, <spread-radius>, <color>.

Features of the box-shadow Property

The box-shadow property has the following features:

  1. Unlike text-shadow, the shadow is clipped by the shape of the element box.
  2. Like text-shadow, it does not affect the layout.
  3. It is affected by border-radius.

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

Unlike text-shadow, the shadow is clipped by the shape of the element box

Unlike text-shadow, which does not clip the shadow to the shape of the text, box-shadow is clipped by the shape of the element box.

Consider the following example:

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

In this example, the shadow produced by text-shadow is not clipped. When the text is transparent or partially transparent, the shadow shows through clearly.

However, in the following example, the shadow created by box-shadow is clipped to the shape of the box, which is transparent.

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

Like text-shadow, it does not affect the layout

The text-shadow and box-shadow properties do not affect the layout, even when the shadow extends far enough to overlap neighboring elements. Overflow caused by a large shadow does not affect scrolling either.

HTML 
<style>
    .text {
        font-size: 70px;
        font-weight: 900;
        color: gold;
        margin: 0;
    }
    .text-2 {
        margin: 0;
        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

In this example, the text-shadow applied to .text-2 overflows upward and appears behind .text-1, yet neither element is pushed or shifted. The text-shadow property does not influence the surrounding layout.

The example below shows that box-shadow behaves the same way.

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

It is affected by border-radius

The box-shadow effect is influenced by the element’s border-radius. The shadow follows the rounded corners of the box and is clipped accordingly.

HTML 
<style>
    .box {
        width: 200px;
        height: 100px;
        border-radius: 20px;
        background-color: gold;
        box-shadow: 10px 10px 15px;
    }
</style>
<div class="box"></div>
Rendered Output

In the example above, the element has border-radius: 20px, which applies a 20px rounded corner to each corner of the box. The box-shadow effect follows this curvature. This behavior remains the same even when the shadow is rendered as an inner shadow using the inset keyword.

Unlike text-shadow, the box-shadow property includes an optional <spread-radius> value that lets you expand or contract a shadow. A positive <spread-radius> expands the shadow and makes it larger, while a negative value contracts it. So how can this value be used effectively?

At first glance, it may seem unnecessary. However, applying a negative <spread-radius> allows you to reduce the shadow’s size, which can make the visual style significantly more refined.

Let’s look at an example that illustrates this approach.

HTML 
<style>
    .box {
        max-width: 250px;
        height: 200px;
        border-radius: 15px;
        background-color: white;
        box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
        transition: box-shadow 0.2s;
    }
    .box:hover {
        box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
    }
</style>
<div class="box"></div>
Rendered Output Hover over the box!

This example shows a common technique where a negative <spread-radius> is used to contract the shadow and enhance its overall visual quality.

Applying Multiple Shadow Effects with box-shadow

You can apply multiple shadow effects with the box-shadow property by separating each value with a comma (,).
The shadows are rendered from front to back in the order they are written, and the first shadow appears on top.

HTML 
<style>
    .box {
        max-width: 250px;
        height: 200px;
        border-radius: 15px;
        border: 1px solid;
        background-color: white;
        box-shadow: 7px 7px red,
                     14px 14px green,
                     21px 21px blue;
    }
</style>
<div class="box"></div>
Rendered Output

In the rendered example, the shadow effects are applied from front to back in the order of red, green, and blue, with the first shadow—red—appearing on top.

Browser compatibility

Browser compatibility for the box-shadow property
Property
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
box-shadow 10 12 4 5.1

Specifications

Specification for the box-shadow property
Specification
box-shadow CSS Backgrounds and Borders Module Level 3
#box-shadow

References

See also