Use this page to see the differences in various box-shadow declarations across browsers.

Select which browsers to display:

Firefox 3.6 Firefox 4.0 Internet
Explorer 9
Chrome 10 Safari 5 Opera 11.10 Android 2.2 iOS 4.2 Opera
Mobile 11
Your
browser
box-shadow: 0 0 4px #000;

Common dropshadow with a modest blur, and nothing else.

box-shadow: 0 0 4px 4px #000;

Common dropshadow with increased spread. Shadow layer should appear bigger.

box-shadow: 4px 4px 4px #000;

Equal blur and positions. Shadow should be top-left aligned with the box.

box-shadow: 4px 4px 4px -2px #000;

Negative spread factor. Shadow layer should appear smaller.

box-shadow: 4px 4px 4px 4px #000;

Equal positions, blur, and spread. Shadow should be top-left aligned with the box, but still be visible on all sides.

box-shadow: inset 0 0 4px #000;

Inset shadow. Makes a shadow appear on the inside of the box, rather than on the outside.

box-shadow: inset 0 0 4px -2px #000;

Inset shadow with negative spread factor. Shadow layer should appear bigger, causing less of it to remain visible.

box-shadow: inset 4px 4px 4px #000;

Equal blur and positions on inset shadow. Shadow should be bottom-right aligned inside the box.

box-shadow: 4px 4px 0 #000;

No blur. Should make a shadow with sharp edge.

box-shadow: 0 0 0 4px #000;

No blur and no position. Shadow should appear like a border.

box-shadow: 4px 4px 4px #f00,
-4px -4px 4px #ff0;

Multiple shadows.

box-shadow: 0 0 4px #f00,
0 0 4px 8px #ff0;

Multiple shadows and different spread factors.

box-shadow: inset 4px 4px 4px #f00,
inset -4px -4px 4px #ff0;

Multiple inset shadows.

box-shadow: inset 0 0 4px #000,
0 0 4px #000;

Combining inset and outset shadows.