Box-Shadow-Generator
Erstellen Sie mehrschichtige CSS-Schatten mit Live-Vorschau.
- Sofort
- Kostenlos
- Privat (lokal verarbeitet)
- Ohne Anmeldung
Schatten mit echter Tiefe, ohne Raterei
Einen Schatten von Hand einzustellen heißt, die Seite zehnmal neu zu laden. Hier bewegen Sie die Regler und die Vorschau reagiert live. Stapeln Sie mehrere Ebenen für realistische Tiefe und kopieren Sie das exakte CSS.
-
Ebene anpassen
X/Y-Versatz, Weichzeichnung, Ausbreitung, Farbe und Deckkraft.
-
Ebenen hinzufügen
Mischen Sie scharfen und diffusen Schatten für ein natürliches Bild.
-
CSS kopieren
Die vollständige box-shadow-Eigenschaft, fertig zum Einfügen.
Die Syntax verstehen
| Wert | Funktion |
|---|---|
| offset-x | Horizontaler Versatz (rechts bei positiv) |
| offset-y | Vertikaler Versatz (unten bei positiv) |
| blur | Weichzeichnungsradius (größer = weicher) |
| spread | Vergrößert (+) oder verkleinert (−) den Schatten |
| color | Farbe, oft rgba() für die Deckkraft |
| inset | Platziert den Schatten innerhalb der Box |
Alles wird im Browser erzeugt. Standardbeispiel: box-shadow: 0px 10px 25px -5px rgba(124, 58, 237, 0.35);
Häufige Fragen
Was bedeuten die box-shadow-Werte?
In Reihenfolge: horizontaler Versatz, vertikaler Versatz, Weichzeichnungsradius, Ausbreitungsradius, dann die Farbe. Beispiel: „0 10px 25px -5px rgba(124, 58, 237, 0.35)“ versetzt den Schatten 10px nach unten, weicht ihn über 25px auf und verkleinert ihn um 5px.
Wozu dient der Ausbreitungsradius (spread)?
Er vergrößert (positiver Wert) oder verkleinert (negativer Wert) den Schatten vor dem Weichzeichnen. Ein negativer Spread eignet sich hervorragend für weiche, eng anliegende Schatten, wie eine Karte, die leicht über der Seite schwebt.
Wie stapele ich mehrere Schatten?
Trennen Sie jede Ebene mit einem Komma. Die zuerst genannte wird oben gezeichnet. Ein enger, scharfer Schatten kombiniert mit einem breiten, diffusen wirkt weit natürlicher als ein einzelner Schatten.
Was ist der Unterschied zwischen box-shadow und drop-shadow?
box-shadow folgt dem Box-Rechteck (und dessen border-radius). filter: drop-shadow() folgt der echten Form inklusive Transparenz — ideal für freigestellte PNGs und SVGs. Für eine Karte oder einen Button ist box-shadow die richtige Wahl.