CSS Box-Shadow Generator
Box-Shadow-CSS mit Live-Vorschau erzeugen. Offset, Weichzeichner, Spread, Farbe und Deckkraft einstellen und Code kopieren.
Vorschau
Parameter
Offset X (px)
Offset Y (px)
Weichzeichner (px)
Spread (px)
Farbe
Deckkraft
Generiertes CSS
Über dieses Tool
Dieses kostenlose Online-Tool ist ein CSS-Box-Shadow-Generator für Front-End-Entwickler. Die CSS-Eigenschaft box-shadow fügt einem Element einen oder mehrere Schatten hinzu. Jeder Schatten wird durch horizontalen Versatz (offset-x), vertikalen Versatz (offset-y), Weichzeichner-Radius, Ausbreitung und Farbe definiert. Das optionale Schlüsselwort "inset" zeichnet den Schatten innen. Hier können Sie alle Parameter per Slider und Farbwähler einstellen, die Vorschau in Echtzeit sehen und den generierten CSS-Code (z. B. box-shadow: 0 8px 24px 0 rgba(0,0,0,0.15);) in Ihre Stylesheet kopieren. Keine Installation nötig; alles läuft im Browser.
So verwenden Sie das Tool
1. Parameter einstellen: Nutzen Sie die Slider oder Zahlenfelder für Offset X (horizontal), Offset Y (vertikal), Blur (Weichzeichner) und Spread (Ausbreitung). Wählen Sie die Schattenfarbe per Farbwähler oder HEX-Eingabe (z. B. #000000) und setzen Sie die Deckkraft (0–1). Aktivieren Sie "Inset" für einen inneren Schatten.
2. Vorschau: Die Beispielbox oben aktualisiert sich in Echtzeit. Prüfen Sie den Effekt, bevor Sie den Code kopieren.
3. Code kopieren: Klicken Sie auf "Code kopieren", um den generierten box-shadow-CSS in die Zwischenablage zu kopieren, und fügen Sie ihn in Ihre CSS-Datei oder Inline-Styles ein.