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.
As of now there is no longer a need for those prefixes. Unprefixed box-shadow is widely supported since 2011. To see shadows here your browser version needs to be at least Firefox 4, Safari 5.1, Chrome 10, Opera 11.5, etc. (mobile: Android 4, iOS 5).


Currently only Mozilla (Gecko, i.e. Firefox) and WebKit (i.e. Apple-Safari) have a CSS‑standard compliant implementation in regard to blur radius.

So you should use Firefox or Safari as reference to create a future-proof blurred box-shadow

Other browser engines do it false, especially at larger blur values the shadow is too slim. This error applies to:
Blink (Google Chrome/Chromium) and similar to Microsoft's Trident (Internet Explorer) and Edge
See Chrome bug 179006.

 UPDATE March/April 2019:  This bug is finally fixed in Chrome 73.
Microsoft's Edge will be fixed as well at some point in 2019. They switch their engine to Chromium/Blink anyway.

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.


Stehkoſthalle
Frankenſtein

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

inset 0 0 0 1ex black, inset 0 0 0 2ex red, inset 0 0 0 3ex gold, inset 0 0 0 6ex silver;

0 0 0 1em gold, 0 0 1em 2em red, 0 0 0 3em black, 0 0 0 3.7em yellowgreen, 0 0 0 4.4em green; /* border-radius: 1px */

1em 0 gold, 0 -1em red, 0 1em lime, -1em 0 blue;

1em 0 1em gold, 0 -1em 1em red, 0 1em 1em lime, -1em 0 0 blue, 0 0 0 3em lightblue;

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.

0 0 0 0.5em;
0 0 1em;
1em 0.5em;
1em 0.5em 1em;
0 2em 1em -0.7em;

0.3em 0.3em lightgreen;
0.3em 0.3em 0 0.6em lightgreen;
0 2em 0 -0.9em lightgreen;
2em 1.5em 0 -0.7em lightgreen;
9em 1.2em 0 -0.6em lightgreen;
-27.3em 0 lightgreen;
0 2em 0 -1em 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); /* background:red */
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); /* background:red */
0.2em 0.2em 0.7em black, inset 0 0 0.7em red;

With the kind support of Electrical Emergency Service Nuremberg