Box-Shadow-Generator
Kombiniere mehrschichtige Schatten mit Live-Vorschau – sanfte Erhebung, scharfe Versätze, Innenschatten und fertige Presets.
So funktioniert der Box-Shadow-Generator
Gestalte mehrschichtige CSS-Schatten mit Einstellungen pro Ebene und Live-Vorschau und kopiere dann produktionsreifes CSS.
Mehrschichtige Schatten
Echte Tiefe entsteht selten durch einen einzigen Schatten. Staple bis zu sechs Ebenen – einen engen Kontaktschatten plus breitere Umgebungsschatten – für Tiefe, die natürlich statt matschig wirkt.
Volle Kontrolle
Jede Ebene hat X/Y-Versatz, Unschärfe, Ausbreitung, Farbe und Deckkraft sowie einen Schalter „Innen“ für Innenschatten. Die Live-Vorschau aktualisiert sich, während du ziehst.
Helle & dunkle Vorschau
Auf dunklen Flächen wirken Schatten anders. Wechsle den Vorschau-Hintergrund, um vor dem Release beide Themes zu prüfen.
Presets für den Start
Die Presets „Weich“, „Mehrschichtig“, „Scharf“, „Schwebend“ und „Innen“ bieten dir einen soliden Ausgangspunkt – passe den Schatten an und kopiere das fertige CSS mit einem Klick.
Häufig gestellte Fragen
offset-x offset-y blur spread. Die Offsets verschieben den Schatten, blur macht seinen Rand weich, und spread vergrößert oder verkleinert ihn vor dem Weichzeichnen. Eine Farbe (am besten mit Alphakanal) vervollständigt den Wert.
Eine einzelne große Unschärfe wirkt flach und grau. Die Kombination aus einem kleinen scharfen Schatten (Kontakt), einem mittleren (Hauptlicht) und einem großen weichen (Umgebungslicht) ahmt echtes Licht nach und hält die Kanten klar.
inset zeichnet den Schatten innerhalb des Elements – typisch für gedrückte Buttons, vertiefte Eingabefelder und die dunkle Hälfte von Oberflächen im Neumorphismus-Stil.
Eine Animation von box-shadow löst in jedem Frame ein Repaint aus. Für eine flüssige Hover-Erhebung animierst du besser die opacity eines Pseudo-Elements, das den Zielschatten bereits hat.