CSS3 box-shadowProperty
Example
Add shadow to the div element:
div
{
box-shadow: 10px 10px 5px #888888;
}
Try it Yourself »
See more examples at the bottom of this page.
Browser Support
The numbers in the table indicate the first browser version number that supports this property.
The number immediately preceding -webkit-, -ms-, or -moz- is the first browser version that supports the prefixed property.
| Property | |||||
|---|---|---|---|---|---|
| box-shadow | 10.0 -webkit- | 9.0.0 | 4.0 (2.0)[3] 3.5(1.9.1) -moz |
5.1[1] 3.0 -webkit |
10.5[1] -o- |
Property definition and usage instructions
The box-shadow property can 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
box-shadow: h-shadow v-shadow blur spread color inset;
Note:The boxShadow property attaches one or more drop shadows to a box. The property is a comma-separated list of shadows, each shadow 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 position of the shadow. Negative values are allowed. |
| v-shadow | Required. The vertical position of the shadow. Negative values are allowed. |
| blur | Optional. Blur distance |
| spread | Optional. The size of the shadow |
| color | Optional. The color of the shadow. ForCSS Color Valuesfind a complete list of color values |
| inset | Optional. Changes the shadow from an outer shadow (at the beginning) to an inner shadow. |
Online Examples
Rotate image
This example demonstrates how to create "polaroid" photos and rotated images.
Related Articles
CSS3 Tutorial:CSS3 Border
other extensions