CSS property: box-shadow

Description

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; omitted colors are a UA-chosen color.

Syntax

box-shadow: none | <shadow> [,<shadow> ]*;

Values

none (by default)

<shadow>

inset? && [ <hoffset> <voffset> && <color>? ]

inset? && [ <hoffset> <voffset> <blur_radius> <blur_spread> && <color>? ]

insetThe 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).
<hoffset>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.
<voffset>The vertical offset. A positive value offsets the shadow down, a negative one up.
<blur_radius>The blur radius. Negative values are not allowed. The blur radius is perpendicular to and centered on the shadow's edge and defines a gradient color transition ranging from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it: if the blur radius is 0, the shadow's edge is sharp, otherwise the larger the value, the more the shadow is blurred. The exact algorithm for the blur transition is not specified.
<blur_spread>The spread radius. Positive values cause the shadow shape to expand in all directions by the specified radius. Negative values cause the shadow shape to contract. For corners with a zero border-radius, the corner remains sharp. Otherwise the spread radius outsets the edge of the shadow by the amount of the spread radius in the direction perpendicular to the shadow's edge. Note that for inner shadows, expanding the shadow means shrinking the shadow's perimeter. The UA may approximate the spread shape by outsetting (insetting, for inner shadows) the shadow's straight edges by the spread radius and increasing (decreasing, for inner shadows) and flooring at zero the corner radii by the same amount. If both a blur radius and a spread radius are defined, the blur is applied to the resulting shape after the spread is applied.
<color>The color of the shadow.

Versions

Examples

p {
    box-shadow: 2px 2px #000;
}
figure {
    box-shadow: 2px 2px 5px 10px #000;
}
blockquote {
    box-shadow: inset 2px 2px #000;
}