CSS-Schatten-Generator (box-shadow)

Bewegen Sie die Regler und sehen Sie sofort, wie der Schatten einer Box, Karte oder Schaltfläche aussieht. Kombinieren Sie mehrere Ebenen für realistischere Schatten oder starten Sie mit einem der Beispiele, und kopieren Sie den box-shadow-Code für Ihr CSS.

Box-Schatten

Farbe der Box

Hintergrundfarbe

Abgerundete Ecken:

Beispiele:

Schattenebenen

Versatz X

Versatz Y

Unschärfe

Ausdehnung

Farbe

Deckkraft

Innerer Schatten (inset)

CSS-Code

So funktioniert box-shadow

Die Eigenschaft box-shadow erhält bis zu vier Längen und eine Farbe: horizontalen und vertikalen Versatz (negativ nach links und oben), Unschärfe (0 = scharfe Kante), Ausdehnung (vergrößert bzw. bei negativem Wert verkleinert den Schatten) und die Farbe, meist Schwarz mit Transparenz (rgba(0, 0, 0, 0.2)). Mit dem Schlüsselwort inset wird der Schatten innerhalb der Box gezeichnet.

Mehrere Schatten lassen sich durch Kommas getrennt kombinieren. Die realistischsten Schatten verbinden einen kurzen, scharfen Schatten mit einem größeren, weichen – so machen es Material Design und die meisten Designsysteme.

Tricks mit box-shadow

Ein Schatten ohne Versatz und Unschärfe, aber mit Ausdehnung (0 0 0 4px), zeichnet einen Umriss, der keinen Platz beansprucht – ideal für den Fokus von Schaltflächen und Feldern. Neumorphismus verwendet zwei gegenläufige Schatten, einen hellen und einen dunklen, auf einem Hintergrund in der Farbe der Box.

Schatten beeinflussen weder das Layout noch die Größe des Elements, doch sehr große, weiche Schatten auf vielen Elementen können das Scrollen auf Mobilgeräten verlangsamen. Für die Silhouette eines transparenten PNG verwenden Sie filter: drop-shadow(), für Text text-shadow.