CSS-Box-Schatten-Generator

Die box-shadow-Syntax

box-shadow: <x-offset> <y-offset> <blur> <spread> <colour> [inset];

• x-offset: positiv = rechts, negativ = links.
• y-offset: positiv = unten, negativ = oben.
• blur: 0 = harter Rand, höher = weicher. Sichtbare Größe ist ungefähr 1,5x Unschärfe über das Element hinaus.
• spread: zusätzliche Größe über das Element hinaus. Positiv vergrößert den Schatten; negativ verkleinert ihn (nützlich für subtile Halos).
• colour: unterstützt jede CSS-Farbe. rgba(0, 0, 0, 0.15) ist das A und O.
• inset: Schlüsselwort, das den Schatten innerhalb des Elements umschaltet.

Geschichtete Schatten sehen realistisch aus

Dieser Generator erzeugt jeweils eine einzelne Schattenregel. Um einen mehrschichtigen Schatten zu bauen, erzeugen Sie jede Schicht einzeln und verbinden die Regeln mit einem Komma.

Ein Schatten mit 0 0 40px sieht verschwommen aus. Zwei Schatten, ein kleiner scharfer nahe am Element und ein größerer weicher weiter entfernt, ahmen nach, wie echtes Licht streut.

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.08),
  0 4px 12px rgba(0, 0, 0, 0.08);

Die erste Zeile gibt den engen Kontakt-Schatten; die zweite den weicheren Umgebungs-Schatten. Dieses einzelne Muster deckt 80% der Kartenstil-UI ab.

Elevationssysteme

Material Design verwendet 6 Elevationsstufen, jede mit einem anderen Schattenstapel. Vereinfacht:

Wählen Sie einen pro Elevationsrolle und verwenden Sie ihn konsistent.

Farbige Schatten wirken natürlicher

Reine schwarze Schatten wirken künstlich, weil echte Schatten von der darunter liegenden Oberfläche gefärbt werden. Versuchen Sie:

box-shadow: 0 12px 24px rgba(40, 80, 120, 0.18);

• ein kühles Blau-Grau anstelle von reinem Schwarz. Auf warmen Hintergründen verwenden Sie einen wärmeren Farbton.

Leistung

Box-Schatten werden bei jedem Neuzeichnen gemalt. Große, schwere Schatten auf vielen Elementen können das Scrollen verlangsamen. Milderungen:

• Verwenden Sie transform: translateZ(0) auf dem Element, um eine zusammengesetzte Ebene zu erzwingen.
• Ersetzen Sie komplexe Schatten durch filter: drop-shadow(), nur wenn Sie möchten, dass der Schatten einem Clip-Pfad folgt (es ist im Allgemeinen langsamer).
• Begrenzen Sie Schatten auf Elementen, die häufig neu gerendert werden.

Inset für gedrückte Zustände

.button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
}

Inset-Schatten erzeugen einen vertieften Look, die Schaltfläche erscheint, als wäre sie in die Oberfläche gedrückt. Kombinieren Sie dies mit einem kleinen nach unten gerichteten transform: translateY(1px) für einen taktilen Klick.