HomeMenu
Jesus · Bible · HTML · CSS · JS · PHP · SVG · Applications

box-shadow

Description

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

The first length is the horizontal offset, the second length is the vertical offset, the third length is the blur radius, and the fourth length is the spread distance.

Syntax

CSS

box-shadow: value;

JS

object.style.boxShadow = "value";

Values

<'box-shadow'> = none | <shadow>#
none

Specifies no shadows.

<shadow> = <color>? && [<length>{2} <length [0,∞]>? <length>?] && inset?
<color>

Specifies the color using a keyword or a numerical specification.

<length>

Specifies the length using a number followed by a unit of measurement.

1st specifies the horizontal offset. A positive value draws the shadow to the right and a negative value draws the shadow to the left.

2nd specifies the vertical offset. A positive value draws the shadow to the bottom and a negative value draws the shadow to the top.

3rd specifies the blur radius. Negative values are not allowed.

4th specifies the spread distance. A positive value causes the shadow to expand and a negative value causes the shadow to contract.

inset

Changes the drop shadow from an outer box-shadow to an inner box-shadow.

Initial

none

Examples

1 · blur

2 · color

3 · horizontal

4 · inset

5 · none

6 · spread

7 · vertical

8 · JS