The box-shadow property 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 browser chosen color.

  • Initial valuenone
  • Applies toAll elements
  • InheritedNo
  • MediaVisual
  • Computed valueAny <length> made absolute; any specified color computed; otherwise as specified
  • AnimatableYes
  • CSS VersionCSS3
  • JavaScript
Formal syntax: none | <shadow> [ , <shadow> ]* 

box-shadow: <shadow>;
<shadow> = inset? && <length>{2,4} && <color>?
  • 1st <length>Specifies 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.
  • 2nd <length>Specifies the vertical offset of the shadow. A positive value offsets the shadow down, a negative one up.
  • 3rd <length>Specifies the blur radius. 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.
  • 4th <length>Specifies the spread distance. Positive values cause the shadow to expand in all directions by the specified radius. Negative values cause the shadow to contract.
  • <color>Specifies the color of the shadow. If the color is absent, the used color is taken from the 'color' property.
  • insetIf present, the 'inset' keyword changes the drop shadow from an outer box-shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner box-shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behindit).
.class {
   box-shadow: 64px 64px 12px 40px red; 

Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.