CSS: Box Shadow

By Xah Lee. Date: . Last updated: .

Interactive Box Shadow Generator

Offset x:
Offset y:
Offset length
Offset direction
blur
spread

Simple Box Shadow

Here is a simple box shadow:

SHADOW!

Here is the CSS code:

div
{
box-shadow: 5px 5px red
}

Syntax

  1. box-shadow: x_offset y_offset color
  2. box-shadow: x_offset y_offset blur color
  3. box-shadow: x_offset y_offset blur spread color
  4. box-shadow: inset x_offset y_offset blur spread color
  5. box-shadow: shadow_spec_1, shadow_spec_2

Blur

Here are boxes with increasing blur value.

box-shadow:3px 3px blurpx red

0
2
4
6
8
10

Spread

Here are boxes with increasing spread value.

box-shadow:5px 5px 0px spreadpx red

-2
0
2
4
6

Inset Box Shadow

“inset” box shadow makes the shadow go inside the box. All other parameters are the same.

Examples:

box-shadow: inset 3px 3px red;
box-shadow: inset 0px 0px 20px 5px red;
box-shadow: inset 5px 5px 5px 0px grey;

Multiple Shadow with Inset

box-shadow: inset 0px 0px 4px 3px red, 0px 0px 4px 3px blue;

Multiple Box Shadows

multi box lunch
#multi18462 {
display:table;
border-radius:9px;
padding:3px;
margin:50px;
box-shadow:
8px 6px 13px 8px red,
-16px 12px 20px 16px yellow,
48px 36px 71px 28px cyan;
}

Browser Support

Box shadow is supported in all browsers, as of 2012-04-20.

CSS

Basics

Selectors

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Layers

Transform/Animation

Line Wrap

Misc