Widely supported, although Internet Explorer versions 8 and earlier, and Opera Mini, are party-poopers.
A basic drop-shadow and an inner-shadow.
Value Description Example
No shadow. Default.
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
inset 5px -5px 10px 10px rgba(0,0,0,0.2)
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
box-shadow: 5px -5px;
/* A red drop shadow stretching 5 pixels to the right and 5 pixels up, with a very solid, hard edge. */
box-shadow: inset 0 0 10px rgba(0,0,0,.5);
/* A uniform, semi-transparent black inner-shadow with a 10-pixel-wide blur. */
box-shadow: 5px -5px, inset 0 0 10px rgba(0,0,0,.5);
/* Two shadows, replicating those from #box1 and #box2. */