Ueberblick
Dieses Tool baut box-shadow-Werte, die du direkt in CSS einsetzen kannst, ohne jedes Detail von Hand zu schreiben. Du steuerst horizontalen und vertikalen Versatz, Unschärferadius, Ausbreitung, Schattenfarbe, Deckkraft und Inset-Stil, damit der Schatten genau zum jeweiligen UI-Element passt. Sinnvoll ist es, wenn ein Schatten bewusst wirken soll und nicht zufällig. Du kannst ihn für Karten, Menüs, Dialoge, Sticky-Bars, Formularfelder und Bildcontainer verwenden; die Vorschau hilft dir dabei, subtile und stärkere Varianten sauber zu vergleichen, bevor du dich festlegst.
Anwendungsfaelle
- Tiefe für ProduktkartenErzeuge einen weichen Schatten für Kacheln, damit sich einzelne Produkte klar vom Hintergrund abheben.
- Gedrückter Button-ZustandBaue einen kompakteren Schatten mit weniger Unschärfe und negativer Ausbreitung für klickbare Aktionen.
- Innenschatten für EingabefelderErstelle Inset-Schatten für Textfelder, Suchleisten oder Panels mit eingezogener Optik.
- Schwebende Ebene für PopoversStelle eine größere Unschärfe und moderaten Versatz für Tooltips, Dropdowns und Overlays ein.
So funktioniert es
- 1
Lege den horizontalen und vertikalen Versatz fest, um den Schatten zu positionieren.
- 2
Passe Unschärfe und Ausbreitung an, damit Weichheit und Größe stimmen.
- 3
Wähle Schattenfarbe und Deckkraft passend zu Oberfläche und Hintergrund.
- 4
Aktiviere Inset, wenn der Schatten im Element liegen soll.
- 5
Kopiere den generierten CSS-Code und nutze ihn im gewünschten Selektor.
Beispiele
Weicher neutraler Kartenschatten
Eingabe: x: 0, y: 10px, blur: 30px, spread: -8px, color: rgba(15, 23, 42, 0.14)
Ausgabe: box-shadow: 0 10px 30px -8px rgba(15, 23, 42, 0.14);
Ein dezenter Schatten für helle Karten auf ruhigen Flächen.
Inset für ein vertieftes Feld
Eingabe: x: 0, y: 2px, blur: 6px, spread: 0, color: rgba(0, 0, 0, 0.18), inset: true
Ausgabe: box-shadow: inset 0 2px 6px 0 rgba(0, 0, 0, 0.18);
Ein eingezogener Effekt für ein Eingabefeld oder Panel.
Kompakter Hover-Schatten
Eingabe: x: 0, y: 6px, blur: 16px, spread: -4px, color: rgba(37, 99, 235, 0.22)
Ausgabe: box-shadow: 0 6px 16px -4px rgba(37, 99, 235, 0.22);
Ein farbiger Schatten für Hover-Kacheln oder Aktionen.
FAQ
Was verändert der Wert spread am Schatten?
Spread verändert die Größe des Schattens vor dem Weichzeichnen. Negative Werte ziehen ihn zusammen, positive vergrößern ihn.
Warum wirkt ein Schatten auf dunklem Hintergrund zu hart?
Meist ist die Farbe zu opak oder die Unschärfe zu gering. Verringere die Deckkraft und erhöhe den Blur-Wert für weichere Kanten.
Wann sollte ich Inset statt eines normalen Schattens verwenden?
Inset ist sinnvoll, wenn eine Fläche eingedrückt wirken soll, zum Beispiel bei Formularfeldern, vertieften Panels oder dezenten Innenflächen.
Kann ich mehrere Schattenebenen erzeugen?
Das Tool erzeugt jeweils eine Regel. Für mehrere Ebenen kannst du mehrere box-shadow-Werte manuell in CSS kombinieren.
Warum verschwindet ein Schatten bei stark negativer Ausbreitung?
Eine zu große negative Ausbreitung kann den Schatten zu stark verkleinern, besonders bei wenig Unschärfe. Reduziere den negativen Wert oder erhöhe den Blur.