CSS Box-Shadow Generator

Erstelle einfache und mehrfache CSS-Schatten visuell mit Live-Vorschau.

px
px
px 
{{ cssOutput }}

Was ist CSS box-shadow?

Die CSS-Eigenschaft box-shadow fügt einem Element einen oder mehrere Schatten hinzu. Schatten erzeugen Tiefe und lassen Elemente wie Karten, Buttons und Dialoge vom Hintergrund abheben. Du kannst Offset, Blur-Radius, Spread-Radius, Farbe und den Inset-Modus steuern.

Die box-shadow Syntax

Die Syntax lautet: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;. Offset-X und Offset-Y bestimmen die Position des Schattens. Blur-Radius steuert die Weichzeichnung, Spread-Radius vergrößert oder verkleinert den Schatten. Das Schlüsselwort inset erzeugt einen inneren Schatten. Mehrere Schatten werden kommagetrennt angegeben.

Tipps für gelungene Schatten

  • Verwende mehrere Schatten mit unterschiedlichem Blur für realistischere Ergebnisse.
  • Halte die Schatten-Farbe dezent — verwende transparente Schwarztöne statt harter Farben.
  • Inset-Schatten eignen sich hervorragend für eingedrückte Buttons und Eingabefelder.
  • Teste Schatten im Light und Dark Mode, da sie unterschiedlich wirken können.