Bild
100% in Ihrem Browser
Box-Shadow-Generator — Visuelles CSS-box-shadow-Tool
Erstellen Sie CSS-box-shadow-Effekte visuell. Passen Sie Versatz, Unschärfe, Ausbreitung, Farbe und Deckkraft an, stapeln Sie mehrere Schatten und kopieren Sie den Code. Live-Vorschau, 100% in Ihrem Browser.
CSS-Code
Box-Shadow-Generator — Gestalten Sie CSS-Schatten Visuell
Erstellen Sie perfekte CSS-box-shadow-Effekte mit einem visuellen Live-Editor. Ziehen Sie Schieberegler, um Versatz, Unschärfe, Ausbreitung und Farbe zu steuern, stapeln Sie mehrere Schattenebenen für Tiefe, schalten Sie Innenschatten um und kopieren Sie das einsatzbereite CSS. Kein Raten von Pixelwerten mehr.
Die vier box-shadow-Werte
- Versatz X: horizontaler Abstand — positiv verschiebt den Schatten nach rechts, negativ nach links
- Versatz Y: vertikaler Abstand — positiv nach unten, negativ nach oben
- Unschärfe: wie weich der Schattenrand ist (0 = scharf, hoch = sehr weich)
- Ausbreitung: vergrößert (positiv) oder verkleinert (negativ) die Schattengröße
Funktionen
- Live-Vorschau: sehen Sie den Schatten sofort auf einem Beispielelement
- Farbe + Deckkraft: wählen Sie eine beliebige Farbe und justieren Sie die Transparenz
- Innenschatten: erstellen Sie innere Schatten für eingedrückte Effekte
- Mehrere Ebenen: stapeln Sie mehrere Schatten für realistische Tiefe
- Sauberer CSS-Output: kopieren Sie eine einzelne einfügefertige Eigenschaft
Tipps für realistische Schatten
- Echte Schatten sind meist weich — verwenden Sie großzügige Unschärfe und niedrige Deckkraft (10–25%)
- Schichten Sie zwei oder drei Schatten (einen engen dunklen + einen breiten weichen) für natürliche Tiefe
- Halten Sie die Lichtrichtung in Ihrer gesamten Oberfläche konsistent
- Dezent ist besser — schwere Schatten wirken veraltet
Datenschutz
Dieses Tool läuft vollständig in Ihrem Browser. Nichts wird hochgeladen oder gespeichert.