CSS3 box-shadow Property

Example

Add a box-shadow to a div element:

div
{
-moz-box-shadow: 10px 10px 5px #888888; /* Firefox */
-webkit-box-shadow: 10px 10px 5px #888888; /* Safari and Chrome */
box-shadow: 10px 10px 5px #888888;
}

Try it yourself »
More examples at the bottom of this page.

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The box-shadow property is only supported in Opera.

Firefox supports an alternative, the -moz-box-shadow property.

Safari and Chrome support an alternative, the -webkit-box-shadow property.


Definition and Usage

The box-shadow property attaches one or more drop-shadows to the box.

Default value: none
Inherited: no
Version: CSS3
JavaScript syntax: object.style.boxShadow="10px 10px 5px #888888"


Syntax

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

Note: The box-shadow 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.

Value Description
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
inset Optional. Changes the shadow from an outer shadow (outset) to an inner shadow


Examples

Try it Yourself - Examples

Images thrown on the table
This example demonstrates how to create "polaroid" pictures and rotate the pictures.