Style boxShadow attribute

Definition and usage

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

See also:

CSS reference manual:property box-shadow

Example

Add box-shadow to div element:

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

Try it yourself

Syntax

Return boxShadow property:

object.style.boxShadow

Set boxShadow property:

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

Note:boxShadow The 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 is not displayed at all.

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 property box-shadow
Version de CSS : CSS3

Support du navigateur

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