box-shadow

W3C Recommendation

Summary

The box-shadow property programmatically creates one or more shadows on the inside or outside of a block level element.

Overview table

Initial value	`none`
Applies to	All elements
Inherited	No
Media	visual
Computed value	any length made absolute; any specified color computed; otherwise as specified
Animatable	No
CSS Object Model Property	`boxShadow`

Syntax

box-shadow: inset offset-x offset-y blur-radius spread-distance color
box-shadow: inset 2px 2px 10px 1rem black;
box-shadow: offset-x offset-y blur-radius color, offset-x offset-y blur-radius color

Values

inset offset-x offset-y blur-radius spread-distance color: box-shadow accepts a number of different components inside its value:

inset (optional): If not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content). The presence of the inset keyword changes the shadow to one inside the frame (as if the content was depressed inside the box). Inset shadows are drawn inside the border (even transparent ones), above the background, but below content.
offset-x: The first length is the horizontal offset of the shadow — offset-x specifies the horizontal offset of the shadow, which can be a number of any length unit. Positive values place the shadow to the right of the element, and negative values to the left. If both offset-x and offset-y values are 0, the shadow is placed directly behind the element.
offset-y: The second length is the vertical offset of the shadow — offset-y specifies the vertical offset of the shadow, which can be a number of any length unit. Positive values place the shadow below the element, and negative values above. If both offset-x and offset-y values are 0, the shadow is placed directly behind the element.
blur-radius (optional): The third length is a blur radius, which can be a number of any length unit. The larger this value, the bigger the blur, meaning the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it defaults to 0 (the shadow's edge is sharp).
spread-distance (optional): The fourth length is a spread distance, which again can be a number of any unit. Positive values cause the shadow to expand and grow bigger, negative values cause the shadow to shrink. If not specified, it defaults to 0 (the shadow is the same size as the element). Note that setting the size of an outer shadow to 0 causes it to disappear, whereas a 0-sized inner shadow covers the entire padding-box. For inner shadows, expanding the shadow (creating more shadow area) means contracting the shadow's perimeter shape.

inset 2px 2px 10px 1rem black;: Real syntax example of a box-shadow.

offset-x offset-y blur-radius color, offset-x offset-y blur-radius color: To apply multiple shadows to one element, write the box-shadow values out one after another, separated by commas.

Examples

View live exampleAn example of a multiple box-shadows. The inner shadow appears on all four sides by creating two box-shadows.

HTML

<style>

    .shadow-style {

    width: 100px;

    height: 100px;

    box-shadow: inset 30px 30px 5px green, inset -30px -30px 5px blue;

    border: 10px solid yellow;

    background-color: red;

}

</style>

<body>

    <div class="shadow-style">

    </div>

</body>

View live exampleAn example of a basic Drop Shadow. An outer box-shadow casts a shadow as if the border-box of the element were opaque. The shadow is drawn outside the border edge only: it is clipped inside the border-box of the element.

CSS

article {
/* box-shadow: left-offset top-offset blur color; */
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

View live exampleAn example of inner drop shadows. An inner box-shadow casts a shadow as if everything outside the padding edge were opaque. The inner shadow is drawn inside the padding edge only: it is clipped outside the padding box of the element.

CSS

article {
/* box-shadow: left-offset top-offset blur color; */
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;
}

View live exampleAn example of how a positive spread distance length value affects the drop shadow. If a spread distance is defined, the shadow is expanded outward or contracted inward.

CSS

article {
/* box-shadow: left-offset top-offset blur spread color; */
   box-shadow: 0 0 5px 10px rgba(0, 0, 0, 0.5);
}

View live exampleNegative values cause the shadow shape to contract.

CSS

article {
/* box-shadow: left-offset top-offset blur spread color; */
   box-shadow: 0 20px 5px -10px rgba(0, 0, 0, 0.5);
}

View live exampleIf the blur value is zero, the shadow's edge is sharp. (A non-zero blur value indicates that the resulting shadow should be blurred, such as by a Gaussian filter.)

CSS

article {
/* box-shadow: left-offset top-offset blur spread color; */
   box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.5);
}

View live exampleIf the box has a nonzero ‘border-radius’, the shadow shape is rounded in the same way. (The ‘border-image’ does not affect the shape of the box-shadow.)

CSS

article {
/* box-shadow: left-offset top-offset blur color; */
   box-shadow: 0 0 10px rgba(0, 0, 0, 1);
	
   border-radius: 10px;
}

Usage

Remarks

Related specifications

Specification	Status	Related Changes
CSS Backgrounds and Borders Module Level 3	Editor's Draft

Compatibility

Desktop

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic Support	10.0 1.0 -webkit	13.0 4.0 -moz	9.0	10.5	5.1 3.0 -webkit

Mobile

Feature	Android	BlackBerry	Chrome for mobile	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Opera Mini	Safari Mobile
Basic Support	4.0 2.1 -webkit	10.0 7.0 -webkit	?	?	?	Unsupported	?	5.0-5.1 3.2 -webkit

Compatibility notes

Browser	Version	Note
IE	9.0	In order to get box-shadow in IE9 or later, you need to set border-collapse to separate. Since version 5.5, Internet Explorer supports Microsoft's DropShadow and Shadow Filter. You can use this proprietary extension to cast a drop shadow (though the syntax and the effect are different from CSS3).
Chrome	10.0	Basic support in 1.0 with -webkit prefix, inset and spread radius in 4.0 with -webkit prefix.
Firefox (Gecko)	4.0 (2.0)	Since Firefox 13 (Gecko 13), -moz-box-shadow prefix was dropped and only the unprefixed version is supported.

Search

box-shadow

How to Use

box-shadow

Summary

Overview table

Syntax

Values

Examples

Usage

Remarks

Related specifications

Compatibility

Desktop

Mobile

Compatibility notes