box-shadow versus box-shadow

Use this page to see the differences in various box-shadow declarations across browsers. The comparison you will see, will show screenshots (well, partly that is) of the selected browsers. These are not generated in any way - it's all manual labour in booting up the browser or OS and taking screenshots by hand. The only column that is dynamically generated is the "Your browser" column.

Select which browsers to display:

Firefox 3.5-3.6Firefox 4-13Internet Explorer 9Internet Explorer 10Chrome 1Chrome 2-3Chrome 4-9Chrome 10-11Chrome 12-20Safari 3.2Safari 4.0Safari 5.0Safari 5.1Opera 10.60Opera 11Opera 12rekonq 0.9.2Android 1.6Android 2.2Android 2.3Android 3.2Android 4.0iOS 3.2iOS 4.2iOS 5.1Opera Mobile 11Opera Mobile 12Firefox Mobile 14Windows Phone 7.5BlackBerry OS 6.0BlackBerry OS 7.1BlackBerry PlayBook 2.0webOS 3.0Symbian BelleYour
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.

Some notes