Box Shadow Generator: Schatten in Ebenen aufbauen
Ein einzelner Schatten sieht schnell wie ein Aufkleber aus. Erst zwei oder drei Schichten mit wachsender Unschärfe machen aus einer Karte etwas, das über der Seite zu schweben scheint. Der Box Shadow Generator verwaltet bis zu sechs Ebenen, zeigt jede Änderung sofort an einer Vorschau-Box und schreibt die fertige box-shadow-Zeile. Beim Laden ist die Vorlage „Mehrstufig“ aktiv.
Was in der Zeile steht und was nicht
Die erste Ebene liegt oben, denn CSS liest die kommagetrennte Liste in dieser Reihenfolge. Das Tool sortiert nichts um. Nullwerte stehen ohne Einheit da: Ein Versatz von 0 wird zu 0, nicht zu 0px. Bei 100 % Deckkraft steht die Farbe als kleingeschriebener Hex-Wert in der Zeile, etwa #111827. Darunter erscheint rgb(0 0 0 / 15%).
Ausgeblendete Ebenen fehlen in der Ausgabe. Sind alle ausgeblendet, lautet sie box-shadow: none;. Hersteller-Präfixe wie -webkit- fügt das Tool nicht hinzu.
Die Grenzen: Versatz und Ausbreitung gehen von -100 bis 100 px, die Unschärfe von 0 bis 200 px, die Deckkraft von 0 bis 100 % und der Eckenradius von 0 bis 100 px. Alle Werte sind ganze Zahlen, und zu große Eingaben werden beim Verlassen des Felds auf das Maximum gesetzt. Mehr als sechs Ebenen sind nicht möglich, die letzte Ebene lässt sich nicht löschen. Farben nimmt das Tool nur als Hex-Code mit 3 oder 6 Stellen. Namen wie red oder hsl()-Werte lehnt es mit einer Meldung ab.
Die Berechnung läuft per JavaScript in deinem Browser. Ein Klick auf eine Schaltfläche sendet keine Anfrage, das zeigt dir der Netzwerk-Tab. Die Kopier-Schaltflächen schreiben in die Zwischenablage. Gespeichert wird nichts, nach einem Neuladen ist wieder „Mehrstufig“ aktiv.
Sieben Vorlagen als Startpunkt
- „Weich“: ein einziger großer, blasser Schatten unter einer weißen Karte.
- „Mehrstufig“ stapelt fünf Ebenen mit 1, 2, 4, 8 und 16 px Versatz.
- „Harter Versatz“ ohne jede Unschärfe, im Stil von Neo-Brutalismus-Buttons.
- Dazu „Innen (Inset)“, „Glow“ auf dunklem Grund und zwei Neumorphismus-Varianten, erhaben und gedrückt.
Eine Vorlage setzt auch Boxfarbe, Seitenfarbe und Eckenradius. Danach kannst du alles ändern.
Vom Regler zur Zeile im Stylesheet
- Klicke eine Vorlage an oder ändere die Werte der ersten Ebene mit Regler oder Zahlenfeld.
- Mit „Ebene hinzufügen“ kommt eine Schicht dazu. Die Pfeil-Schaltflächen ändern die Reihenfolge, die Kopier-Schaltfläche dupliziert, der Papierkorb entfernt.
- Passe „Boxfarbe“, „Seitenfarbe“ und „Eckenradius“ an dein Design an.
- „CSS kopieren“ übernimmt die ganze Deklaration, „Nur den Wert kopieren“ den Teil hinter dem Doppelpunkt.
Häufig gestellte Fragen (FAQ)
box-shadow-Deklaration mit Kommas. Der Generator macht das bei „Ebene hinzufügen“ automatisch, bis zu 6 Ebenen. Der erste Schatten liegt oben.