Box Shadow#

Mittels der CSS Eigenschaft box-shadow erhalten Elemente auf der Webseite, wie Boxen, Buttons oder Bildern, einen Schlagschatten hinzufügen. Das verleiht ihnen einen 3D-Effekt und macht die Seite lebendiger.

Schlagschatten 
box-shadow: none|h-offset v-offset blur spread color |inset;

Eigenschaftswert

Erklärung

none

Kein Schlagschatten.

h-offset

Wie weit in px soll der Schatten auf der X-Achse verschoben sein (auch negative Werte möglich).

v-offset

Wie weit in px soll der Schatten auf der Y-Achse verschoben sein (auch negative Werte möglich).

blur

Optional. Der Weichzeichnungsradius. Je höher die Angabe in px, desto verschwommener wird der Schatten.

spread

Optional. Der Ausbreitungsradius. Ein positiver Wert in px vergrößert die Größe des Schattens, ein negativer Wert verringert die Größe des Schattens.

color

Die Farbe des Schatten (Farbname, HEX-Wert, RGB(A)-Wert).

insert

Optional. Ändert den Schatten von einem äußeren Schatten (outset) zu einem inneren Schatten.

Element-Schatten#

Einfacher Schatten, der auf der

  • X-Achse 10px verschoben,

  • auf der Y-Achse 15px verschoben

  • und den Farbton: #02ABBA hat.

.box {
    box-shadow: 10px 15px #02ABBA;
}

Der Schatten wird im nächsten Beispiel durch den blur Wert um 20 Pixel weichgezeichnet.

.box {
    box-shadow: 10px 15px 20px crimson;
}

Die Ausbreitung des Schattens verändert sich um 25px durch den spread Wert.

.box {
    box-shadow: 10px 15px 20px 25px crimson;
}

Element-Schatten nach innen#

Der Schatten kann auch nach innen mittels inset gerichtet sein.

.box {
    box-shadow: 0px 0px 5px 10px #f3f3f3 inset;
}

Mehrere Schatten anwenden#

Mehrere Schatten können kommagetrennt an einem Element angegeben sein. Der erste Schatten ist immer über allen Schatten

.box {
    box-shadow: 15px 15px 10px 10px #d8d8d8, -10px -10px 10px 15px #f2f2f2, 0px 0px 35px 25px rgba(255,255,255,0.3) inset;
}