CSS-box-shadow-Generator
Gestalte realistische Schatten, indem du mehrere Ebenen stapelst – wie die besten Designsysteme. Passe Versatz, Unschärfe, Ausdehnung, Farbe und Deckkraft jeder Ebene an und kopiere das Ergebnis als CSS oder Tailwind-Klasse.
Zu 100 % in deinem Browser verarbeitet
Ctrl + Enter ausführenCtrl + C Ergebnis kopieren
So funktioniert es
- 1Starte mit einem Stil (weich, Erhebung, schwebend…) oder von null.
- 2Wähle eine Ebene und passe Versatz, Unschärfe, Ausdehnung, Farbe und Deckkraft an.
- 3Füge mit „+“ Ebenen für natürlichere Schatten hinzu oder aktiviere „inset“ für Innenschatten.
- 4Ändere Boxfarbe, Hintergrund und Radius und kopiere das CSS oder die Tailwind-Klasse.
Anwendungsfälle
- Karten, Dropdowns und Modals mit realistischer Tiefe.
- Hover- und Erhebungszustände für Buttons.
- Brutalistische Stile mit harten Schatten oder Leuchteffekten.
- Formularfelder mit Innenschatten.
Häufig gestellte Fragen
Wie funktioniert die Eigenschaft box-shadow?
Sie nimmt horizontalen und vertikalen Versatz, Unschärfe, Ausdehnung und Farbe sowie optional das Schlüsselwort inset. Mehrere Schatten werden durch Kommas getrennt; der erste liegt oben.
Warum mehrere Ebenen?
Echte Schatten haben nahe am Objekt einen scharfen und weiter entfernt einen diffusen Bereich. Übereinanderliegende Ebenen mit unterschiedlicher Unschärfe und geringer Deckkraft ahmen das nach und wirken deutlich natürlicher.
Was bewirkt der Wert „spread“?
Er vergrößert (positiv) oder verkleinert (negativ) den Schatten vor dem Weichzeichnen. Ein negativer Spread mit starker Unschärfe erzeugt weiche Schatten, die seitlich nicht hervorschauen.
Wie nutze ich das in Tailwind CSS?
Wähle den Tab Tailwind und kopiere die Klasse mit beliebigem Wert, z. B. shadow-[0px_10px_30px_-5px_rgba(0,0,0,0.2)]. Sie funktioniert in Tailwind v3 und v4 ohne weitere Konfiguration.