box-shadow property

[This documentation is preliminary and is subject to change.]

Sets or retrieves a comma-separated list of shadows that attaches one or more drop shadows to the current box.

Syntax

box-shadow: none | <shadow>

Property values

none

Default. Indicates there is no shadow.

shadow

A comma-separated list of shadows, each specified by two to four nonzero length values, an optional color, and an optional inset keyword. See Remarks for specific information about usage.

CSS information

Standards information

• CSS Backgrounds and Borders Module Level 3, Section 6.2

Remarks

The box-shadow property can specify one or more drop shadows. The components of each shadow are interpreted as follows:

• Required: The first length is the horizontal offset of the shadow. A positive value draws a shadow that is offset to the right of the box, a negative length to the left.
• Required: The second length is the vertical offset. A positive value offsets the shadow down, a negative one up.
• Optional: The third length is a blur distance. Negative values are not allowed. If the blur value is zero, the shadow's edge is sharp. Otherwise, the larger the value, the more the shadow's edge is blurred.
• Optional: The fourth length is a spread distance. Positive values cause the shadow shape to expand in all directions by the specified radius. Negative values cause the shadow shape to contract.
• Optional: The color is the color of the shadow.
• Optional: An inset keyword, if present, changes the drop shadow from an outer shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it).

Build date: 3/13/2012