Style boxShadow attribute

Definition and Usage

boxShadow Property sets or returns the drop-shadow of the box element.

See also:

CSS Reference Manual:box-shadow attribute

Example

Add box-shadow to div element:

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

Try it yourself

Syntax

Return boxShadow attribute:

object.style.boxShadow

Set boxShadow attribute:

object.style.boxShadow = "none|h-shadow v-shadow blur spread color |inset|initial|inherit"

Note:boxShadow The box-shadow attribute adds one or more shadows to the box. This attribute is a list of shadows separated by commas, each defined by 2-4 length values, an optional color value, and an optional 'inset' keyword. Omitted length values are 0.

Attribute value

Value Description
none Default value. The shadow is not displayed.
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. The blur distance.
spread Optional. The size of the shadow.
color

Optional. The color of the shadow. The default value is black.

Please see CSS color values, for a complete list of possible color values.

Tip:In Safari (on PC),color The parameter is required. If no color is specified, the shadow will not be displayed.
inset Optional. Changes the external shadow (outset) to an internal shadow.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical details

Default value: None
Return value: string representing the element's box-shadow attribute.
CSS Version: CSS3

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support 9.0 Support 5.1 Support