Style boxShadow Property

❮ Previous ❮ Style Object Reference Next ❯

Example

Add a box-shadow to a div element:

document.getElementById("myDIV").style.boxShadow = "10px 20px 30px blue";

Description

The boxShadow property sets or returns the drop-shadows of a box element.

Browser Support

Property
boxShadow	Yes	9.0	Yes	5.1	Yes

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

CSS reference: box-shadow property