Box-Shadow-Generator

So nutzen Sie den Box-Shadow-Generator

1. Starten Sie mit einer Vorlage oder behalten Sie den Standardschatten Weich. Die Zeile Vorlagen bietet Weich, Hart, Mehrschichtig, Elevation, Neumorphismus, Innen und Leuchten.
2. Klicken Sie unter Schattenebenen auf eine Ebene, um sie auszuwählen. Jede Ebene lässt sich mit Nach oben und Nach unten verschieben oder mit Entfernen löschen. Ebene hinzufügen dupliziert die ausgewählte Ebene, sodass Sie eine Kopie anpassen können.
3. Bearbeiten Sie die ausgewählte Ebene unter Ausgewählte Ebene bearbeiten: Ziehen Sie den Punkt im Feld Versatz oder nutzen Sie die Schieberegler und Zahlenfelder für Horizontaler Versatz (px), Vertikaler Versatz (px), Unschärfe (px) und Ausdehnung (px).
4. Wählen Sie eine Schattenfarbe mit dem Farbwähler oder tippen Sie eine beliebige CSS-Farbe ins Codefeld, und stellen Sie dann die Deckkraft (%) ein. Aktivieren Sie Inset (Innenschatten), um den Schatten innerhalb der Box zu zeichnen.
5. Passen Sie die Vorschau-Einstellungen an (Boxfarbe, Hintergrundfarbe, Eckenradius (px)), um den Schatten mit Ihren echten Farben zu sehen. Sie wirken sich nur auf die Vorschau aus.
6. Übernehmen Sie die Deklaration aus CSS-Code mit Kopieren.

Tastatur: Fokussieren Sie den Punkt im Feld Versatz und verschieben Sie ihn mit den Pfeiltasten um 1 px, mit Umschalt um 10 px.

So funktioniert box-shadow

Die Syntax eines Schattens lautet box-shadow: [inset] x y blur spread color.

• x und y verschieben den Schatten nach rechts und nach unten, negative Werte nach links und oben. Eine Lichtquelle über dem Element bedeutet ein positives y.
• Blur (Unschärfe) macht die Kante weich und kann nicht negativ sein. Mit 0 entsteht eine scharfkantige Kopie der Box.
• Spread (Ausdehnung) vergrößert (positiv) oder verkleinert (negativ) den Schatten, bevor er weichgezeichnet wird. Ein negativer Spread mit großem y hält den Schatten unter dem Element statt rundherum.
• Color enthält meist Transparenz. Dieses Tool schreibt deckende Farben als HEX und transparente als rgba(), das jeder Browser versteht. Geben Sie eine Farbe ein, die bereits einen Alphakanal hat, wird dieser mit der Deckkraft (%) multipliziert.
• inset setzt den Schatten innerhalb des Rahmens, als wäre die Box in die Seite eingedrückt.

Der Schatten folgt dem border-radius des Elements und verändert das Layout nie: Er nimmt keinen Platz ein und erzeugt keine Scrollleisten.

Warum mehrere Schatten übereinanderlegen?

Echte Schatten sind kein einzelnes verschwommenes Rechteck. Ein kleiner, dunkler, enger Schatten liegt direkt unter dem Objekt, ein großer, blasser und weicher reicht weiter hinaus. Zwei bis fünf gestapelte Ebenen ahmen das nach und wirken deutlich natürlicher als ein einziger schwerer Schatten. Die Vorlage Mehrschichtig verdoppelt Versatz und Unschärfe bei jeder Stufe mit geringer Deckkraft – eine Technik, die viele Designsysteme bekannt gemacht haben. Elevation imitiert die dreischichtigen Schatten von Material Design.

Die erste Ebene der Liste wird über den anderen gezeichnet, genau wie im CSS-Wert. Die Reihenfolge spielt vor allem dann eine Rolle, wenn Sie Innen- und Außenschatten mischen oder kräftige Farben verwenden.

Neumorphismus

Neumorphismus („Soft UI“) setzt zwei Schatten auf ein Element, das dieselbe Farbe wie sein Hintergrund hat: einen dunklen nach unten rechts und einen hellen nach oben links versetzt. Die Vorlage Neumorphismus setzt beide Farben auf #e0e5ec. Bedenken Sie, dass dieser Stil wenig Kontrast hat: Buttons in diesem Look brauchen einen deutlichen Fokuszustand und gut lesbare Beschriftungen.