CSS-Box-Shadow-Generator
box-shadow mit Reglern gestalten: Offset, Blur, Spread, Farbe, Deckkraft, Inset und mehrere Ebenen – CSS und Tailwind.
Der CSS-Box-Shadow-Generator baut Schatten über Regler: X- und Y-Versatz, Weichzeichnung (Blur), Ausdehnung (Spread), Farbe, Deckkraft und Inset. Du kannst mehrere Schatten übereinander legen, Vorlagen laden und siehst das Ergebnis live. Fertig sind der box-shadow-Code für CSS und die Tailwind-Klasse mit arbitrary value.
box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, 0.2);Wie funktioniert box-shadow?
Die Eigenschaft box-shadow zeichnet einen Schatten um die Box eines Elements. Sie besteht
aus Versatz in x- und y-Richtung, Blur, Spread und Farbe. Mehrere Schatten trennst du mit Kommas,
der erste liegt oben.
Die Werte im Überblick
| Wert | Wirkung |
|---|---|
| X / Y | Verschiebt den Schatten nach rechts/unten (negativ: links/oben) |
| Blur | Weichzeichnung der Kante, 0 ergibt einen harten Schatten |
| Spread | Vergrößert oder verkleinert die Schattenfläche |
| Farbe | Meist Schwarz mit geringer Deckkraft, für Glow eine Akzentfarbe |
| inset | Schatten innerhalb der Box, etwa für gedrückte Buttons |
So gehst du vor
- Vorlage wählen und Regler anpassen.
- Für mehr Tiefe zwei bis drei Ebenen kombinieren.
- Code kopieren. Schatten und Glaseffekt kombinierst du im Glassmorphism-Generator.
Beispiel
Eine Karte wirkt schwebend mit 0 10px 30px -5px rgba(0, 0, 0, 0.2): der negative
Spread hält den Schatten schmal, der große Blur macht ihn weich. Für Hover-Zustände erhöhst du
den Y-Versatz und den Blur ein wenig, Übergänge gestaltest du im Easing-Generator.
Häufige Fragen
Was bedeuten die Werte von box-shadow?
Die Reihenfolge lautet: x-Versatz, y-Versatz, Blur, Spread, Farbe. Der Blur macht die Kante weich, Spread vergrößert oder verkleinert den Schatten, negative Werte ziehen ihn zusammen. Mit dem Schlüsselwort inset liegt der Schatten innen.
Warum wirken mehrere Schatten realistischer?
In der Natur gibt es einen scharfen Kontaktschatten und einen weichen, weiten Schlagschatten. Mit mehreren Ebenen, die nach unten hin größer und blasser werden, entsteht ein Gefühl von Höhe, das ein einzelner Schatten nicht erreicht.
Wie mache ich einen Schatten weicher?
Erhöhe den Blur und senke die Deckkraft. Ein negativer Spread hält den Schatten schmal, damit er nicht seitlich über das Element hinausragt.
Wie nutze ich den Schatten in Tailwind?
Mit einer arbitrary value: shadow-[0_10px_30px_-5px_rgba(0,0,0,0.2)]. Leerzeichen werden dabei durch Unterstriche ersetzt. Alternativ trägst du den Wert im Theme als eigenen Schatten ein.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.