Box-Shadow-Generator
Kombinieren Sie ein paar sanfte Ebenen für natürlich wirkende Schatten und kopieren Sie dann das CSS.
Auf diesem Gerät versiegelt
Läuft in Ihrem Browser. Nichts wird hochgeladen.
Versiegelt
Vorschau
Schattenebenen
Noch kein Schatten. Fügen Sie eine Ebene hinzu, um zu beginnen.
CSS-Code
So funktioniert es
-
Mit einer Vorlage beginnen
Wählen Sie einen weichen, geschichteten, schwebenden, scharfen oder inneren Schatten als Ausgangspunkt.
-
Ebenen anpassen
Stellen Sie für jede Ebene Versatz, Unschärfe, Ausdehnung, Farbe und Deckkraft ein, und fügen Sie Ebenen hinzu oder entfernen Sie sie. Die Vorschau aktualisiert sich dabei laufend.
-
CSS kopieren
Kopieren Sie die box-shadow-Deklaration und fügen Sie sie in Ihr Stylesheet ein.
Häufige Fragen
Was bewirken Unschärfe und Ausdehnung?
Die Unschärfe (blur) macht den Rand des Schattens weicher: Je höher der Wert, desto diffuser wird er. Die Ausdehnung (spread) vergrößert oder verkleinert den Schatten, bevor die Unschärfe angewendet wird. Eine negative Ausdehnung mit großer Unschärfe ergibt den weichen, schwebenden Look moderner Oberflächen.
Warum mehrere Schattenebenen verwenden?
Echte Schatten haben einen dunklen, engen Kern nahe am Objekt und einen weichen, breiten Hof weiter entfernt. Eine kleine scharfe Ebene kombiniert mit ein oder zwei größeren, helleren Ebenen bildet das nach und wirkt viel natürlicher als ein einzelner Schatten.
Was ist ein Innenschatten?
Ein Innenschatten (inset) wird innerhalb des Elements gezeichnet statt außerhalb. Die Fläche wirkt dadurch eingedrückt, was sich gut für Eingabefelder oder gedrückte Buttons eignet.
Funktioniert der Schatten in allen Browsern?
Ja. box-shadow, mehrere Ebenen und die im Code verwendete rgb()-Farbsyntax werden von allen aktuellen Browsern unterstützt.
Verlangsamt ein Box-Shadow meine Seite?
Statische Schatten sind günstig zu zeichnen. Sehr große Unschärfen auf vielen Elementen oder das Animieren des Schattens selbst können mehr kosten. Für eine flüssige Animation blenden Sie besser die Deckkraft eines Pseudo-Elements ein und aus, das den Schatten trägt.