Example
Add a box-shadow to a div element:
document.getElementById("myDIV").style.boxShadow = "10px 20px 30px blue";Try it Yourself »
Definition and Usage
The boxShadow property sets or returns the drop-shadows of a box element.
Browser Support
The boxShadow property is supported in IE9+, Firefox, Chrome, Opera, and Safari 5.1.1.
Syntax
Return the boxShadow property:
object.style.boxShadow
Set the boxShadow property:
object.style.boxShadow="none|h-shadow v-shadow blur spread color |inset|initial|inherit"
Note: The boxShadow property attaches one or more drop-shadows to the
box. 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 |
|---|---|
| none | Default value. No shadow is displayed |
| h-shadow | Required. The position of the horizontal shadow. Negative values are allowed |
| v-shadow | Required. The position of the vertical shadow. Negative values are allowed |
| blur | Optional. The blur distance |
| spread | Optional. The size of shadow |
| 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. |
| inset | Optional. Changes the shadow from an outer shadow (outset) to an inner shadow |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technical Details
| Default Value: | none |
|---|---|
| Return Value: | A String, representing the box-shadow property of an element |
| CSS Version | CSS3 |
Related Pages
CSS reference: box-shadow property
< Style Object