CSS 3 box-shadow property, inset keyword and spread radius test case
The examples on this site don't use -webkit- or -moz- prefixes. So to see shadows here your browser version needs to be at least Firefox 4, Safari 5.1, Chrome 10, Opera 11.5, etc. (on mobile: Android 4, iOS 5).
As of now there is no longer a need for those prefixes. Unprefixed box-shadow is widely supported.
In case you want to keep the -webkit-prefix for now (not recommended), do it in that order:
-webkit-box-shadow: /* if you really feel a strong need, add shadows for
old Apple and Android smartphone browsers here */;
box-shadow: /* shadows for any other browser go here */;
Currently only Mozilla (Gecko, aka Firefox) and Apple (WebKit-Safari on desktop and iOS) and Presto‑Opera‑12 have a CSS‑standard compliant implementation in regard to blur radius.
Other browser engines do it slightly false, namely:
– Microsoft's Trident (IE) and Edge as well as Google's Blink (Chrome for desktop and Android) –
See Chrome bug 179006, which seems likely to get fixed in 2017. MS Edge usually follows Chrome/Blink.
So you should use Firefox or Safari as reference to create a future-proof blurred box-shadow
Specifying a color is optional. If omitted, box-shadows are drawn in foreground color (text color), as in the following four examples with dark brown shadows.
Older WebKit browsers are buggy and ignore those. This bug is fixed in WebKit 536.7 and therefore fixed since Chrome 20, Safari 6, iOS 6, Android 4.4.