CSSbox-shadow Property
Example
Add shadows to different <div> elements:
#example1 {
box-shadow: 5px 10px;
}
#example2 {
box-shadow: 5px 10px #888888;
}
Try it Yourself »box-shadow: 5px 10px;
}
#example2 {
box-shadow: 5px 10px #888888;
}
More "Try it Yourself" examples below.
Definition and Usage
Thebox-shadow property attaches one or more shadows to an element.
| Default value: | none |
|---|---|
| Inherited: | no |
| Animatable: | yes.Read aboutanimatableTry 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.
| Property | |||||
|---|---|---|---|---|---|
| box-shadow | 10 | 9 | 4 | 5 | 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
| Value | Description | Demo |
|---|---|---|
| none | Default value. No shadow is displayed | Demo ❯ |
| 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 | Demo ❯ |
| 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 | Demo ❯ |
| blur | Optional. The blur radius. The higher the number, the more blurred the shadow will be | Demo ❯ |
| spread | Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow | Demo ❯ |
| color | Optional. The color of the shadow. The default value is the text color. Look atCSS 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. | Demo ❯ |
| inset | Optional. Changes the shadow from an outer shadow (outset) to an inner shadow | Demo ❯ |
| initial | Sets this property to its default value.Read aboutinitial | |
| inherit | Inherits this property from its parent element.Read aboutinherit |
More Examples
Example
Add a blur effect to the shadow:
#example1 {
box-shadow: 10px 10px 8px #888888;
}
Try it Yourself »box-shadow: 10px 10px 8px #888888;
}
Example
Define the spread radius of the shadow:
#example1 {
box-shadow: 10px 10px 8px 10px #888888;
}
Try it Yourself »box-shadow: 10px 10px 8px 10px #888888;
}
Example
Define multiple shadows:
#example1 {
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}
Try it Yourself »box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}
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 »width: 284px;
padding: 10px 10px 20px 10px;
border: 1px solid #BFBFBF;
background-color: white;
box-shadow: 10px 10px 5px #aaaaaa;
}
Related Pages
CSS tutorial:CSS Box Shadow
HTML DOM reference:boxShadow property
