Box-Shadow-Generator
Gestalte CSS-Box-Shadows visuell mit Live-Vorschau. Passe Versatz, Weichzeichnung, Ausbreitung und Farbe an und kopiere das fertige CSS sofort.
CSS Box Shadow Generator
Design beautiful shadows and copy the CSS instantly.
So verwendest du den Box-Shadow-Generator
- Passe die X- und Y-Versatz-Regler an, um den Schatten relativ zum Element zu positionieren.
- Stelle den Weichzeichnungsradius für Weichheit und den Ausbreitungsradius für die Schattengröße ein.
- Wähle oder tippe eine Schattenfarbe mit einem beliebigen gültigen CSS-Farbwert (hex, rgba, hsla).
- Aktiviere Inset-Schatten für innere Schatteneffekte.
- Kopiere das generierte box-shadow CSS und füge es direkt in dein Stylesheet ein.
Über CSS-Box-Shadows
Box-Shadows verleihen UI-Elementen Tiefe und visuelle Hierarchie. Sie sind eine der meistgenutzten CSS-Eigenschaften im modernen Webdesign und werden auf Karten, Buttons, Modals und Navigationsleisten angewendet.
Dieser Generator bietet volle visuelle Kontrolle — jede Regleränderung aktualisiert die Live-Vorschau sofort, sodass du den exakten Look einstellen kannst, bevor du den Code kopierst. Das generierte CSS verwendet die standardmäßige box-shadow-Syntax und funktioniert in allen modernen Browsern.
Häufig gestellte Fragen
Was bewirkt der Ausbreitungsradius? ▼
Der Ausbreitungsradius steuert, wie weit sich der Schatten über das Element hinaus oder in es hinein erstreckt. Positive Werte dehnen ihn nach außen aus, negative ziehen ihn nach innen.
Was ist ein Inset-Schatten? ▼
Ein Inset-Schatten wird innerhalb der Elementgrenzen statt außerhalb dargestellt. Er wird häufig für gedrückte Button-Effekte oder innere Tiefe verwendet.
Kann ich rgba-Werte für die Schattenfarbe verwenden? ▼
Ja. Du kannst jeden gültigen CSS-Farbwert eingeben, einschließlich rgba, hsla, Hex-Codes oder benannter Farben.
Ist das CSS produktionsreif? ▼
Ja. Das generierte CSS verwendet die standardmäßige box-shadow-Syntax und ist mit allen modernen Browsern kompatibel.