Es gibt noch viel fantastischere Möglichkeiten für box-shadow, hier einige Anregungen.
Weicher Schatten
<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 1.1em 1.2em 1.3em royalblue;"></div>
• 1.1em = horizontale Verschiebung
• 1.2em = vertikale Verschiebung
• 1.3em = Unschärfe-Radius [Blur]
• royalblue = Schattenfarbe
Harter Schattten
<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow:1.1em 1.2em silver;"></div>
4 Farben-Schatten
<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 5px 5px 5px mediumvioletred,-5px 5px 5px yellowgreen,5px -5px 5px royalblue,-5px -5px 5px goldenrod;"></div>
Innerer weicher Schatten auf 2 Seiten
<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: inset 5px 5px 5px black;"></div>
Innerer harter Schatten auf 2 Seiten
<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: inset -5px -5px 0 5px #000;"></div>
Innerer weicher Schatten auf allen Seiten
<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: inset 0 0 10px black;"></div>
Äußerer weicher Schatten auf allen Seiten
<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 0 0 10px black;"></div>
Äußerer weicher Schatten auf 1 Seite
<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 0 20px 20px -20px black;"></div>
Transparenter Schatten
<div style="width: 24em; background: mediumvioletred;">
<div style="width: 50%; height: 4em; box-shadow: 3em 1em rgba(0,0,0,0.3);"></div>
</div>
Schattiger Schatten
<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 0 0 .5em .3em black,1.5em -1em yellowgreen,1.5em 1em 2em mediumvioletred,-1.5em 1em goldenrod,-1.5em -1em 2em royalblue;"></div>