Stimmt etwas mit diesem Tool nicht?
Über „CSS Box Shadow Generator Online“
Dieses Tool baut CSS-box-shadow visuell zusammen — mit Slidern für Offset, Blur, Spread, Farbe und Deckkraft. Der Schatten aktualisiert sich live, und das passende CSS kann anschließend kopiert werden.
Box-Shadows geben Tiefe, heben Elemente vom Hintergrund ab und signalisieren Interaktion (Hover, Pressed, Fokus). Mehrlagige Schatten simulieren komplexe Lichteffekte wie Material-Elevation oder Neumorphismus.
Praktisch für Karten, Modals, Popover, Buttons und alles, was visuell „heben" soll. Klassische box-shadow, mehrere Layer und moderne Offset/Blur-Kombinationen werden ausgegeben.
So nutzt du dieses Tool
Eine CSS-box-shadow-Deklaration bauen
Offsets
«X offset (px)» und «Y offset (px)» verschieben den Schatten horizontal (positiv = rechts) und vertikal (positiv = unten). CSS-Default ist ohne Offset; typische Card-Shadows nutzen Y wie `4`, X nahe 0.
Unschärfe und Farbe
«Blur (px)» steuert die Weichheit — 0 = harte Kanten, 10+ = diffus. «Color» nimmt jede CSS-Farbe, auch rgba/hex mit Alpha. Für dezente UI-Schatten `rgba(0,0,0,0.15)` mit moderatem Blur.
Ausführen
Ergebnis: einzelnes Feld `css` — `<x>px <y>px <blur>px <color>`. Direkt als Wert von `box-shadow:` einsetzen. Spread und Inset werden NICHT ausgegeben — die Syntax erlaubt es, aber das Tool bleibt bei 4 Argumenten.
Mehrere Schatten stapeln
Echte Designs stapeln oft 2–3 Schatten komma-separiert (langer weicher + kurzer harter) für Tiefe. Mit dem Tool jeden einzeln erzeugen und in einem `box-shadow:`-Wert per Komma verbinden.