CSS box-shadow – Schatten und Schlagschatten
CSS box-shadow erzeugt einen oder mehrere Schlagschatten für ein HTML-Element ohne Einsatz von Bitmaps. Heute wird box-shadow von allen modernen Browsern ohne Browser-Präfix gerendert.
Schatten hinter Elementen
box-shadow kann für so ziemlich alles angesetzt werden, was eine Box bildet: auf div-Elemente, auf Tabellen, auf Formulare. Für Text allerdings ist CSS text-shadow die Alternative.

Gelber Nachen
Aquarell auf Galeriepapier

Gelber Nachen
Wasserfarbe auf Hahnemühle
.shadow { horizontaler vertikaler Versatz ┐ ┌ Versatz │ │ ▼ ▼ box-shadow: 3px 5px 10px hsla(0,0%,0%,0.5); ▲ ▲ │ │ Unschärfenradius ┘ └ Farbe des Schattens }
box-shadow ist eine grafische Darstellung außerhalb der Box und keine Layout-Größe wie z. B. width oder padding, die relativ zum Elternelement oder zur eigenen Boxgröße notiert werden können. box-shadow wird von der Rendering-Engine als absolutes grafisches Element behandelt:
horizontaler Versatz, vertikaler Versatz und Unschärfenradius müssen in absoluten Größenangaben wie px oder em vorliegen. Prozent-Angaben % funktionieren nicht bei box-shadow.
Der Schatten wird nur außerhalb oder innerhalb des Elements gerendert, auch wenn das Element semitransparent oder freigestellt ist. Das Abrunden mit border-radius hingegen wirkt.

img.boxfish { box-shadow: 10px 20px 15px silver; border-radius: 20px; }
Für den Schatten hinter einem freigestellten Motiv gibt es eine Alternative: CSS filter: drop-shadow(). drop-shadow ist neben Schwarzweiß, Negativ und Sepia ein Wert von CSS filter.
box-shadow Position
box-shadow beeinflußt das Layout und die Position benachbarter Elemente nicht, kann sich aber über bzw. unter benachbarte Elemente legen.
box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color> [inset] box-shadow: 10px 10px 15px silver;
offset-x ┐ offset-y color │ │ │ ▼ ▼ ▼ box-shadow: 10px 10px 15px 7px silver; ▲ ▲ │ │ blur-radius ┘ └ spread-radius
Per Vorgabe fällt ein box-shadow bei positiven Werten für den horizontalen und vertikalen Abstand nach rechts unten.
- Ein negativer Wert für den horizontalen Versatz zieht den Schlagschatten nach links,
- ein negativer Wert für den vertikalen Versatz zieht den Schlagschatten nach oben.
box-shadow: -10px -10px 5px silver;
box-shadow inset – nach innen
Das optionale Schlüsselwort inset rendert den Schatten wie eingraviert innerhalb des Elements und zeigt sich wie eine Vertiefung.
┌── Schlüsselwort Schatten nach innen ▼ box-shadow: inset 10px 10px 5px 0px rgba(0,0,0,0.75); ▲ ▲ ▲ ▲ │ │ │ │ │ │ │ └── keine zusätzliche Ausbreitung │ │ │ │ │ └── 5px Weichzeichnungsradius │ │ 10px nach rechts ┘ └── 10px nach unten
Bilder verdecken den inneren Schatten, so dass box-shadow inset nur sichtbar ist, wenn das Bild transparente Bereiche hat.


box-shadow – mehrere Schatten animieren
Mehrere Schatten entstehen durch eine Komma-getrennte Liste. Die einzelnen Schatten liegen dabei von vorn (erster Schatten der Liste) nach hinten (letzter Schatten der Liste).
<div style="width: 240px; height: 240px; margin: 10px auto"> <div class="circle"> </div> </div>
.circle { position:relative; cursor:pointer; margin:0 auto; width:220px; height:220px; overflow:hidden; transform:translateZ(0) } .circle:before { border-radius:50%; content:""; position:absolute; top:0; left:0; width:inherit; height:inherit; box-shadow: inset 150px 0 0 hsla(230,80%,70%,0.6), inset 0 150px 0 hsla(230,80%,70%,0.6), inset -150px 0 0 hsla(230,80%,70%,0.6), inset 0 -150px 0 hsla(230,80%,70%,0.6); transition:box-shadow 0.75s } .circle:hover:before{ box-shadow: inset 36px 0 0 hsla(90,50%,40%,0.4), inset 0 36px 0 hsla(240,50%,40%,0.2), inset -36px 0 0 hsla(300,50%,40%,0.2), inset 0 -36px 0 hsla(60,50%,40%,0.2) }
Der Effekt wird durch :hover angestoßen – kritisch für Touchscreens, die nicht unbedingt auf das Hovern mit der Maus reagieren, und wenn doch, den Hover-Zustand einfrieren und beim Heben des Fingers nicht zurück in den Standard-Zustand gehen.
box-shadow mit border-radius
Wenn border-radius für ein Element mit box-shadow angesagt ist, folgt der Schatten der Form der Box – sowohl beim Schatten außerhalb als auch innerhalb des Elements.
Der Schatten der Box wächst mit, wenn border für das Element angegeben wird.
box-shadow und border-image ist nicht unbedingt ein brauchbarer Effekt, auch wenn das Bild für border-image einen transparenten Hintergrund hat.
box-shadow passt sich nicht an das border-image, sondern an die Box an, denn border-image hat keinen Einfluss auf box-shadow.
Omnia Mea Mecum Porto
Am Rande: box-shadow wirkt auch bei Texten, aber genauso wie bei border-image bleibt die Form eines Zeichens oder eines Textes ein Rechteck und box-shadow erzeugt einen eckigen Rahmen. Dafür haben wir dann also text-shadow.
Kein box-shadow, kein drop-shadow mit clip-path
Zwar passt sich box-shadow dem border-radius eines Elements an, nicht aber an einen clip-path.

Was ist der Unterschied zwischen box-shadow und drop-shadow?
box-shadow wirkt auf das gesamte Element – einschließlich des Rahmens und Hintergrunds und bildet immer eine rechteckige Box. drop-shadow() hingegen ist Schatten für transparente Inhalte (Filter-Effekt) und berücksichtigt nur die sichtbaren Pixel des Elements. So wirkt drop-shadow wie ein »echter« Schatten.
Feature | box-shadow | drop-shadow() |
---|---|---|
Auf welches Element wirkt es? | Auf das gesamte rechteckige Element | Nur auf sichtbare Pixel (berücksichtigt Transparenz) |
SVG & transparente Bilder? | ❌ Schatten bleibt rechteckig | ✅ Schatten folgt der Form |
Performance? | 🔹 Geringe Belastung | ⚠️ Höherer Rechenaufwand (Filter-Rendering) |
Kann mehrfache Schatten? | ✅ Ja | ❌ Nein (nur ein Schatten möglich) |
Unterstützt inset (Innenschatten)? | ✅ Ja | ❌ Nein |