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.
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.
Schritt für Schritt
- Klicken Sie auf Schatten hinzufügen und passen Sie Versatz, Unschärfe, Ausbreitung, Farbe und Deckkraft an.
- Fügen Sie bei Bedarf weitere Schatten hinzu. Sie werden übereinandergelegt.
- Kopieren Sie den fertigen Code mit CSS kopieren und fügen Sie ihn in Ihr Stylesheet ein.
Häufige Fragen
Warum mehrere Schatten verwenden?
Mehrere weiche Schatten wirken oft natürlicher als ein einzelner harter. Ein kleiner dunkler und ein großer heller Schatten ergeben einen realistischen Eindruck von Tiefe.
Was bewirkt die Ausbreitung?
Sie vergrößert oder verkleinert den Schatten insgesamt, bevor die Unschärfe angewendet wird.
Gilt der Code in allen Browsern?
Die Eigenschaft box-shadow wird von allen gängigen Browsern unterstützt.