Farben & Design
Box-Shadow-Generator
Der perfekte Schatten per Schieberegler, das CSS mit einem Klick.
Ein gut abgestimmter Schlagschatten hebt eine Karte von der Seite ab, löst einen Button vom Hintergrund und gibt einem Interface Hierarchie – doch einen box-shadow-Wert von Hand zu schreiben, ist Rätselraten. Hier läuft alles über Regler: horizontaler und vertikaler Versatz, Unschärferadius, Ausdehnung, Deckkraft des Schattens, dazu eine Checkbox für den inneren Schatten (inset). Die Vorschau – eine Karte auf neutralem Hintergrund – spiegelt jede Anpassung live wider, genau so, wie Ihr Browser sie rendern wird. Passt das Ergebnis, kopieren Sie die vollständige CSS-Deklaration mit einem Klick und fügen sie in Ihr Stylesheet oder Design-System ein. Kostenlos, ohne Anmeldung – alles direkt in Ihrem Browser.
Wie funktioniert es?
- Stellen Sie den horizontalen (X) und vertikalen (Y) Versatz ein.
- Justieren Sie Unschärfe, Ausdehnung und Deckkraft des Schattens.
- Aktivieren Sie „inset“, wenn Sie einen inneren Schatten möchten.
- Kopieren Sie das erzeugte CSS mit einem Klick.
Häufige Fragen
Wie erziele ich einen natürlichen, dezenten Schatten?
Kleiner vertikaler Versatz (2 bis 8 px), horizontaler Versatz null oder minimal, großzügige Unschärfe (das Zwei- bis Dreifache des Versatzes), niedrige Deckkraft (8 bis 20 %). Licht kommt von oben – der Schatten fällt also nach unten.
Wozu dient der Parameter „Ausdehnung“ (spread)?
Er vergrößert (positiver Wert) oder verkleinert (negativer Wert) den Schatten, bevor die Unschärfe angewendet wird. Eine negative Ausdehnung erzeugt kompakte, elegante Schatten; eine positive Ausdehnung ohne Unschärfe zeichnet einen durchgehenden Rand.
Wann verwende ich einen inneren Schatten (inset)?
Für eine vertiefte Optik: Eingabefelder, gedrückte Buttons, eingelassene Flächen. Der Schatten wird im Inneren des Elements gezeichnet, statt dahinter geworfen zu werden.
Beeinträchtigen Schatten die Performance?
Ein statischer box-shadow wird von Browsern sehr gut optimiert. Vermeiden Sie nur, die Unschärfe auf großen Flächen dauerhaft zu animieren – animieren Sie für Übergänge stattdessen die Deckkraft eines Pseudo-Elements, das den Schatten trägt.