Entwickler / CSS
CSS-Boxschatten-Generator
Erstelle einen CSS-Boxschatten visuell: mit Versatz, Unschärfe, Ausdehnung, Farbe, Deckkraft, inset und mehreren Ebenen. Nutze Presets und eine Live-Vorschau und kopiere anschließend das CSS.
CSS-Boxschatten-Generator: Jede Ebene wird zu einem Schatten in der box-shadow-Liste: horizontaler und vertikaler Versatz, Unschärferadius, Ausdehnung und eine Farbe im Format rgb() mit der Deckkraft nach einem Schrägstrich. Die Ebenen werden so gezeichnet, dass die erste oben liegt. Du kannst den Eckenradius, die Farbe und den Hintergrund der Vorschau-Box an dein Design anpassen. Der Schatten folgt den Ecken genauso wie auf deiner Seite. Läuft zu 100% lokal in deinem Browser, ohne Datei-Uploads zum Server.
- Kategorie
- Entwicklerwerkzeuge
- Ausführungen
- In deinem Browser
- Kosten
- Kostenlos · ohne Anmeldung
- Verfügbarkeit
- Einsatzbereit
Läuft vollständig in deinem Browser
CSS
box-shadow: 0px 4px 6px -1px rgb(0 0 0 / 0.1), 0px 2px 4px -2px rgb(0 0 0 / 0.1);
Die Werte sind Verschiebung nach rechts, Verschiebung nach unten, Unschärfe, Ausbreitung und Farbe. Mehrere dünne Ebenen wirken natürlicher als ein schwerer Schatten; spätere Ebenen werden unter früheren gezeichnet.
Voreinstellungen
Erhöhung
Designsysteme verwenden Schatten, um zu zeigen, wie weit etwas über der Seite schwebt: Eine ruhende Karte hat einen kleinen, engen Schatten, ein Menü oder Dialog dagegen einen größeren, weicheren. Einige feste Stufen statt überall einen anderen Schatten sorgen für ein einheitliches Erscheinungsbild der Oberfläche.
Schatten auf einem dunklen Hintergrund sind kaum sichtbar. Dort erfüllen eine hellere Oberflächenfarbe oder ein dünner Rahmen denselben Zweck. Kombiniere Schatten bei Schaltflächen und Karten mit einem CSS-Verlauf.
Schatten und Leistung
Eine große Unschärfe braucht beim Zeichnen mehr Leistung als eine kleine. Das ist wichtig, wenn viele Elemente mit Schatten gleichzeitig scrollen oder animiert werden. Um einen Schatten beim Darüberfahren zu animieren, blendest du auf einem Pseudoelement mit Deckkraft besser einen zweiten, stärkeren Schatten ein, statt box-shadow in jedem Einzelbild zu ändern.
So benutzt du es
- Starte mit einem Preset oder passe den Versatz, die Unschärfe, die Ausdehnung und die Deckkraft der ersten Ebene an.
- Füge weitere Ebenen hinzu, um einen weicheren, realistischeren Schatten zu erzeugen, oder aktiviere inset für einen Schatten innerhalb der Box.
- Kopiere die box-shadow-Deklaration.
Datenschutz & Einschränkungen
Alles läuft in deinem Browser; dein letzter Schatten wird nur in diesem Browser gespeichert.
Ähnliche Tools
Häufige Fragen
Was bedeuten die vier Zahlen in box-shadow?
Der horizontale Versatz (ein positiver Wert verschiebt den Schatten nach rechts), der vertikale Versatz (ein positiver Wert verschiebt ihn nach unten), der Unschärferadius (größere Werte machen den Schatten weicher; der Wert darf nicht negativ sein) und die Ausdehnung (ein positiver Wert macht den Schatten größer als die Box, ein negativer kleiner). Die Farbe steht am Ende.
Wie erzeuge ich einen natürlich wirkenden Schatten?
Verwende eine geringe Deckkraft und verschiebe den Schatten nach unten, als käme das Licht von oben. Kombiniere außerdem mindestens zwei Ebenen: eine kleine, schärfere Ebene nah an der Box und eine größere, weichere Ebene weiter außen. Eine leicht negative Ausdehnung verhindert, dass eine starke Unschärfe an den Seiten sichtbar wird.
Was bewirkt inset?
Der Schatten wird innerhalb der Box statt außerhalb gezeichnet. Dadurch wirkt die Box eingedrückt – passend für Eingabefelder und gedrückte Schaltflächen.
Warum wird mein Schatten auf einem Bild nicht angezeigt?
box-shadow wird um die Box des Elements gezeichnet, nicht um die Form des darin enthaltenen Bildes. Für die Kontur eines transparenten PNG verwendest du stattdessen den CSS-Filter drop-shadow().
Kostenloses Tool · läuft in deinem browser · kein Konto nötig