CSS3 box-shadow Property
Example
Add a box-shadow to a <div> element:
div
{
box-shadow: 10px 10px 5px #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.
| Default value: | none |
|---|---|
| Inherited: | no |
| Animatable: | yes. Read about animatable Try it |
| Version: | CSS3 |
| JavaScript syntax: | object.style.boxShadow="10px 20px 30px blue" Try it |
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- |
12.0 | 9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
CSS Syntax
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
Note: The box-shadow property attaches one or more shadows to an
element. The property is a comma-separated list of shadows, each specified by 2-4
length values, an optional color, and an optional inset keyword. Omitted
lengths are 0.
Property Values
| Value | Description | Play it |
|---|---|---|
| none | Default value. No shadow is displayed | Play it » |
| h-shadow | Required. The position of the horizontal shadow. Negative values are allowed | Play it » |
| v-shadow | Required. The position of the vertical shadow. Negative values are allowed | Play it » |
| blur | Optional. The blur distance | Play it » |
| spread | Optional. The size of shadow. Negative values are allowed | Play it » |
| color | Optional. The color of the shadow. The default value is black. Look at CSS Color Values
for a complete list of possible color values. Note: In Safari (on PC) the color parameter is required. If you do not specify the color, the shadow is not displayed at all. |
Play it » |
| inset | Optional. Changes the shadow from an outer shadow (outset) to an inner shadow | Play it » |
| initial | Sets this property to its default value. Read about initial | Play it » |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Images
thrown on the table
This example demonstrates how to create "polaroid" pictures and rotate the
pictures.
Related Pages
CSS3 tutorial: CSS3 Borders
HTML DOM reference: boxShadow property
