Description

Adds box-shadows to an element.

/* inset, horizontal length, vertical length, blur radius, spread, color.*/
box-shadow: inset 7px 5px 3px 5px #962096;

  • Inset, if present changes the shadow from an outer to an inner shadow.

  • Horizontal length if positive draws the shadow on the right side of the box, negative value draws to the left side of the box.

  • Vertical length if positive draws to the bottom of the box, negative at the top.

  • Blur radius, 0 value gives a sharp shadow edge, higher values give more blur.

  • Spread, cause the shadow shape to expand in all directions, negative values cause the shadow shape to contract.

box shadows

See http://www.w3.org/TR/css3-background/#the-box-shadow

Live Example
Play with the code in the textarea below.

Values
inset? && [ <length>{2,4} && <color>? ]
Default value
none
Introduced in CSS version
3
Applies to elements
All elements
Inherited
No
Browser Support
BrowsersIEFirefoxSafariOperaChrome
Versions94410.510
Belongs to:

See the full list CSS properties and browser support: CSS Properties