zur Version in deutscher Sprache see also:
requestAnimationFrame (one-line polyfill)
-webkit-prefixes are safe to remove
CSS cursors

-webkit-box-shadow -moz-box-shadow { box-shadow:

inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? && <color>? ]


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 since more than 6 years.
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

Read What does a blur radius mean? from Mozilla's David Baron if you are interested in browser implementation details. Just check your browser for correctness with David's CSS test: blur computation for box-shadow on csswg.org.


border-radius: 50%; box-shadow: inset 0.3em 0.3em 0.9em black;

0.5em -0.5em 0.4em red, 0.5em 0.5em 0.4em gold, -0.5em 0.5em 0.4em lime, -0.5em -0.5em 0.4em blue;

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.

0 0 0 0.5em;
0 0 1em;
1em 0.5em;
1em 0.5em 1em;

0.3em 0.3em lightgreen;
0.3em 0.3em 0 0.6em lightgreen;
0 1.5em 0 -0.7em lightgreen;
2em 1.5em 0 -0.7em lightgreen;
0 2em 0 -1em lightgreen;
9em 1.2em 0 -0.6em lightgreen;

0 0 1em maroon;
0 0 1em 0.5em maroon;
0 0 1em 1em maroon;

-0.4em -0.4em 1em olive;
0.4em 0.4em 1em olive;
0.4em 0.4em 1em -0.2em olive;
0.4em 0.4em 1em 0.4em olive;
0 1.5em 0.5em -1em olive;

inset 0.2em 0.4em red, inset -1em -0.7em red;
inset 11em 0 red;
inset -1em 0 red;
inset 13em 0 3em -3em orange, inset -3em 0 3em -3em blue;
inset 11em 0 2em orange;
inset 0 0.3em red;
inset 0 -1.1em red;
inset 1em 0 1em -1em blue;
inset 0 0 0.5em blue;
inset 0 0 2em blue;
inset 0 2em 3em -1em green;
inset 0 2em 3em -2em green;
inset 0 2em 3em -3em green;
inset 0 0 1em khaki;
inset 0 0 1em khaki, inset 0 0 1em khaki, inset 0 0 1em khaki, inset 0 0 1em khaki;
inset 0 0 0.5em 0.5em khaki; /* similar to above */

/* seamless if <blur-radius> ≤ <spread-radius> */
inset 0 0 0.5em 0.5em khaki; /* background: black */
inset 0 0 2em 2em khaki; /* background: red; padding: 2em */
0 0 0.5em 0.5em teal; /* background:teal */
inset 0 0 0.5em 0.5em indigo, 0 0 0.5em 0.5em indigo; /* padding:1em */

inset 0 0 1em black, inset 0 0 1em black, inset 0 0 1em black, inset 0 0 1em black;
inset 0 0 0.7em 0.5em black; /* should be very similar to above */
inset 0 2em 3em -1.5em green, inset 0 -2em 3em -2em blue;
inset 1em 1em 2em -1em blue;
inset 1em 1em 2em -1em blue, inset -1em -1em 2em -1em red;
inset 0 2em 3em -2em white, inset 0 -2em 3em -2.5em black; /* background:red */
inset 1em 1em 1em -1em white, inset -1em -1em 1em -1em black; /* background:red */
inset -1em -1em 1em -1em black, inset 1em 1em 1em -1em white; /* background:red */
inset -0.3em -0.3em 0.6em rgba(0,0,0,0.5), inset 0.3em 0.3em 0.6em rgba(256,256,256,0.7);
inset 0.3em 0.3em 0.6em rgba(256,256,256,0.5), inset -0.3em -0.3em 0.6em rgba(0,0,0,0.5);
0.2em 0.2em 0.7em black, inset 0 0 0.7em red;

With the kind support of Electrical Emergency Service Nuremberg