HTML Dog
Skip to navigation

CSS Property: box-shadow

Drop-shadows! For boxes!

A basic drop-shadow and an inner-shadow.

Possible Values

ValueDescriptionExample
noneNo shadow. Default.
inset [length] [length] [length] [length] [color]
  • inset is optional — if used, this specifies that the shadow falls inwards, rather than outwards.
  • First length is the horizontal offset. A positive value pushes the shadow to the right. A negative value pushes it to the left. Required.
  • Second length is the vertical offset. A positive value pushes the shadow down. A negative value pushes it up. Required.
  • Third length is the blur radius. The higher the value, the greater the blur. Should not be negative. Optional — if unused, defaults to 0 (a sharp edge — no blur).
  • Fourth length is the spread distance. A positive value expands the shadow. A negative value contracts it. Optional — if unused, defaults to 0 (no spread).
  • Color is the shadow color. Optional — if unused, defaults to the computed value of color.
inset 5px -5px 10px 10px rgba(0,0,0,0.2)
[values][values]Multiple shadows. A list of shadow values can be separated by commas. The first value set will define the top shadow, the second the shadow generated underneath that, and so on.2px 2px 3px red, 4px 4px 3px blue
inherit
initial
unset

Example


#box1 {
    color: red;
    box-shadow: 5px -5px;
}
/* A red drop shadow stretching 5 pixels to the right and 5 pixels up, with a very solid, hard edge. */

#box2 {
    box-shadow: inset 0 0 10px rgba(0,0,0,.5);
}
/* A uniform, semi-transparent black inner-shadow with a 10-pixel-wide blur. */

#box3 {
    box-shadow: 5px -5px, inset 0 0 10px rgba(0,0,0,.5);
}
/* Two shadows, replicating those from #box1 and #box2. */

Browser support

Can I Use css-boxshadow? Data on support for the css-boxshadow feature across the major browsers from caniuse.com.