CSS box-shadow property

Definition and Usage

The boxShadow property adds one or more shadows to the box.

Tip:Use the border-image-* properties to construct beautiful scalable buttons!

See also:

CSS3 Tutorial:CSS3 Borders

HTML DOM Reference Manual:boxShadow Property

Example

Add box-shadow to the div element:

div
{
box-shadow: 10px 10px 5px #888888;
}

Try it yourself

More examples are at the bottom of the page.

CSS Syntax

box-shadow: h-shadow v-shadow blur spread color inset;

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

Attribute Value

Value Description Test
h-shadow Required. The horizontal position of the shadow. Negative values are allowed. Test
v-shadow Required. The vertical position of the shadow. Negative values are allowed. Test
blur Optional. The blur distance. Test
spread Optional. The size of the shadow. Test
color Optional. The color of the shadow. See CSS color values. Test
inset Optional. Change the external shadow (outset) to an internal shadow. Test

Technical Details

Default Value: none
Inheritance: no
Version: CSS3
JavaScript Syntax: object.style.boxShadow="10px 10px 5px #888888"

More examples

The image thrown on the table
This example demonstrates how to create a 'Polaroid' image and rotate the image.

Browser support

The numbers in the table indicate the first browser version that fully supports the property.

Numbers with -webkit- or -moz- prefix indicate the first version using the prefix.

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 9.0 4.0
3.5 -moz-		 5.1
3.1 -webkit-		 10.5