CSS

box-shadow

Property

Example

Add shadows to different <div> elements:

#example1 {
  box-shadow: 5px 10px;
}

#example2 {
  box-shadow:
5px 10px #888888;
}

Try it Yourself »

More “Try it Yourself” examples below.

Definition and Usage

The box-shadow property attaches one or more shadows to an element.

Show demo ❯

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property

box-shadow
10.0
4.0 -webkit-
9.0
4.0
3.5 -moz-
5.1
3.1 -webkit-
10.5

CSS Syntax

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

Note: To attach more than one shadow to an
element, add a comma-separated list of shadows (see “Try it Yourself” example
below).

Property Values

More Examples

Example

Add a blur effect to the shadow:

#example1 {
  box-shadow: 10px 10px 8px #888888;
}

Try it Yourself »

Example

Define the spread radius of the shadow:

#example1 {
  box-shadow: 10px 10px 8px 10px #888888;
}

Try it Yourself »

Example

Define multiple shadows:

#example1 {
  box-shadow: 5px 5px blue, 10px 10px
red, 15px 15px green;
}

Try it Yourself »

Example

Add the inset keyword:

#example1 {
  box-shadow: 5px 10px inset;
}

Try it Yourself »

Example

Images thrown on the table. This example demonstrates how to create “polaroid” pictures and rotate the
pictures:

div.polaroid {
  width: 284px;
 
padding: 10px 10px 20px 10px;
  border: 1px solid
#BFBFBF;
  background-color: white;
  box-shadow: 10px 10px 5px #aaaaaa;
}

Try it Yourself »

Related Pages

CSS tutorial: CSS Box Shadow

HTML DOM reference: boxShadow property