CSS3 `box-shadow` Property

Example

Add a shadow to a div element:

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

Browser Support

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

Numbers prefixed with -webkit-, -ms-, or -moz- indicate the first browser version that supported the prefixed property.

Property
box-shadow	10.0 -webkit-	9.0.0	4.0 (2.0)[3] <br>3.5(1.9.1) <br>-moz	5.1[1] <br>3.0 <br>-webkit	10.5[1] <br>-o-

Property Definition and Usage

The box-shadow property allows you to set one or more drop shadows on a box.

Default value:	none
Inherited:	no
---	---
Version:	CSS3
---	---
JavaScript syntax:	object.style.boxShadow="10px 10px 5px #888888"
---	---

Syntax

Note: The boxShadow property adds one or more drop shadows to a box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color value, and an optional inset keyword. Omitted lengths are 0.

Value	Description
h-shadow	Required. The horizontal shadow position. Allows negative values
v-shadow	Required. The vertical shadow position. Allows negative values
blur	Optional. The blur distance
spread	Optional. The size of the shadow
color	Optional. The color of the shadow. In CSS color values
inset	Optional. Changes the shadow from an outer shadow to an inner shadow

Online Example

Rotate Image

CSS3 Tutorial: CSS3 Borders

❮ Pr Padding Bottom Css3 Pr Animation Iteration Count ❯