box-shadow property
Specifies one or more set of shadow values that attaches one or more drop shadows to the current box.
  |
Syntax
box-shadow: none |
<shadow>
[ ,
<shadow>
* ]
Property values
none-
Initial value. Indicates there is no shadow.
- shadow
-
A shadow specified by two to four length values, an optional color, and an optional inset keyword. If more than one shadow is specified, each set of values is separated by a comma. The components of each shadow are interpreted as follows:
Value Description horizontal offset
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.
vertical offset
Required. The second length is the vertical offset. A positive value offsets the shadow down, a negative one up.
blur distance
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.
spread distance
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.
color
Optional. The color is the color of the shadow. This value can be any supported color value.
inset
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).
CSS information
| Applies To | All elements |
|---|---|
| Media | visual |
| Inherited | no |
| Initial Value | none |
Standards information
- CSS Backgrounds and Borders Module Level 3, Section 7.2
See also
Send comments about this topic to Microsoft
Build date: 11/29/2012
