Latest web development tutorials
 

Style boxShadow Property

< Style Object

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

Internet Explorer Firefox Opera Google Chrome Safari

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