CSS Box Shadow

CSS Box Shadow

The CSS box-shadow property adds one or more shadows around an element's box without changing the element's size or position in the page layout.

A box shadow can be positioned horizontally and vertically, blurred, expanded or contracted with a spread value, colored, or placed inside the element. Multiple shadows can also be combined in a single declaration.

box-shadow Syntax

A basic box shadow requires horizontal and vertical offset values. Blur, spread, color, and the inset keyword can be added when needed.

.box {
  box-shadow: 5px 5px 10px 2px rgb(0 0 0 / 30%);
}

The values in this example represent the horizontal offset, vertical offset, blur radius, spread radius, and shadow color.

Horizontal Offset

The first length in a box-shadow declaration controls the horizontal position of the shadow.

.box {
  box-shadow: 10px 0 5px gray;
}

A positive horizontal offset moves the shadow to the right. A negative value moves it to the left.

.box {
  box-shadow: -10px 0 5px gray;
}

Vertical Offset

The second length controls the vertical position of the shadow.

.box {
  box-shadow: 0 10px 5px gray;
}

A positive vertical offset moves the shadow downward. A negative value moves it upward.

.box {
  box-shadow: 0 -10px 5px gray;
}

Blur Radius

The optional third length controls how much the shadow is blurred.

.box {
  box-shadow: 5px 5px 15px gray;
}

A value of 0 creates a sharp-edged shadow. Increasing the blur radius creates a softer and more diffuse shadow. Negative blur values are not allowed.

Spread Radius

The optional fourth length is the spread radius. It changes the size of the shadow before the blur is applied.

.box {
  box-shadow: 5px 5px 10px 5px gray;
}

A positive spread value expands the shadow. A negative spread value contracts it.

.box {
  box-shadow: 5px 5px 10px -3px gray;
}

Shadow Color

A shadow can use CSS color values such as named colors, hexadecimal values, RGB, HSL, and other supported color formats.

.box {
  box-shadow: 5px 5px 10px rgb(0 0 0 / 30%);
}

Colors with an alpha value are especially useful for shadows because partial transparency allows the background behind the shadow to remain visible.

.box {
  box-shadow: 0 4px 12px rgb(0 0 0 / 20%);
}

If the shadow color is omitted, the shadow uses the element's current color value.

Inset Shadows

By default, a box shadow is drawn outside the element. Adding the inset keyword draws the shadow inside the element instead.

.box {
  box-shadow: inset 0 0 10px rgb(0 0 0 / 30%);
}

Inset shadows can create the appearance of depth inside a box and are sometimes used for controls, panels, or other interface elements.

Multiple Shadows

Multiple box shadows can be applied to the same element by separating each shadow with a comma.

.box {
  box-shadow: 0 4px 8px rgb(0 0 0 / 25%), 0 8px 20px rgb(0 0 0 / 15%);
}

The shadows are layered together. The first shadow in the list is drawn on top of the shadows that follow it.

Multiple shadows can combine different offsets, blur amounts, spread values, colors, and inset shadows.

Box Shadows and Layout

A box shadow is a visual effect and does not affect the size or position of the element in normal layout.

.box {
  width: 300px;
  box-shadow: 10px 10px 20px gray;
}

The element's declared width remains 300px. The shadow can extend beyond the element's border box, but that extra painted area does not increase the element's layout dimensions.

Because shadows can extend beyond an element, they can be clipped when an ancestor limits visible overflow.

Box Shadow Example

The following example adds a soft shadow below and to the right of a box.

.box {
  box-shadow: 8px 8px 15px 2px rgb(0 0 0 / 30%);
}

Open the example in the editor and change the horizontal offset, vertical offset, blur radius, spread radius, or color. You can also add inset to the declaration to move the shadow inside the box.