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

Some notes

All box-shadows have been declared with -moz- and -webkit- prefixes, as well as with no prefix. This will give older Gecko- and WebKit-based browsers a chance to compete, plus it's common practice to declare CSS3 properties this way. I left out the prefixes -ms- and -o-, since Internet Explorer and Opera don't actually need them for box-shadows.
Internet Explorer 10 shows some strange missing-pixel-artefacts. ~~This is probably because IE10 is not a finished product at the time the screenshots were taken~~. These screenshots were taken on Windows 8 RTM running out of the box. Honestly, how did this get past testing? In any case, I mean to be accurate, so the artefacts are going to stay until Microsoft decides to fix their browser.
Of all the browsers (that render box-shadows more or less properly) Internet Explorer 9 renders them the thinnest. Firefox 4 and later render them the thickest. I can't tell if it's a bug in Internet Explorer or Firefox, or if it's a bug at all (in either browser). The point is, If your design relies on thin shadows, keep in mind that it may veer off a couple of pixels in blur radius between these browsers.
Browsers that don't render box-shadows at all have been left out of the equasion entirely. It is pointless to include empty columns for each and every browser that came before the emergence of the box-shadow. Browser like these notably include Internet Explorer 8 and earlier, Firefox 3.0 and earlier, Opera Mini, Symbian S60, Symbian^3, and others.
I don't know what's going on with Android 3.2, Windows Phone 7.5, and webOS 3.0. Their browsers are very capable with modern layout engines, yet the box-shadows show severe artefacts, missing renderings and other problems. Keep in mind that these screenshots come directly from the OS'es, i.e. they were not taken with some in-browser screenshot tool that might mess things up.
Of course, the aforementioned three mobile browsers are not the only ones with problems. Among all existing browsers, mobile browsers are the worst at rendering box-shadows. Not only that, but the artefacts differ the most among browsers - much more than on desktop browsers. This might be due to the fact that mobile browsers are less frequently updated.