CSS box-shadow Property

Example

Add shadows to different <div> elements:

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

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

Definition and Usage

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

Default value:	none
Inherited:	no
Animatable:	yes.
Version:	CSS3
JavaScript syntax:	object.style.boxShadow="10px 20px 30px blue"

• Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
• object - object in javascript means the element on which box-shadow is applied.
• Animatable - "Animatable = yes" means that it can be animated with CSS @keyframes.

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 examples below).

Property Values

Value	Description	Demo
none	Default value. No shadow is displayed
h-offset	Required. The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box
v-offset	Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box
blur	Optional. The blur radius. The higher the number, the more blurred the shadow will be
spread	Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow
color	Optional. The color of the shadow. The default value is the text color. Note: In Safari (on PC) the color parameter is required. If you do not specify the color, the shadow is not displayed at all.
inset	Optional. Changes the shadow from an outer shadow (outset) to an inner shadow
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

More Examples

Example

Add a blur effect to the shadow:

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

Example

Define the spread radius of the shadow:

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

Example

Define multiple shadows:

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

Example

Add the inset keyword:

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