Über dieses Tool
Mit box-shadow wirft ein Element in CSS einen Schatten. Schatten zeigen, was „über“ der Seite liegt – Karten, Menüs, Dialoge oder Buttons – und geben flachen Oberflächen Tiefe. Gute Schatten sind meist weicher und blasser, als man denkt.
Der Generator zeigt jede Änderung sofort an einer Vorschau-Box, deren Farbe, Hintergrund und Eckenradius du anpassen kannst. Du kannst bis zu zehn Schattenebenen stapeln, z. B. einen engen und einen weiten Schatten für einen natürlicheren Eindruck, und jede Ebene auch als Innenschatten (inset) setzen.
Vorlagen wie „Weich“, „Geschichtet“ oder „Leuchten“ geben dir einen schnellen Startpunkt. Die Einstellungen stehen in der URL, du kannst einen Schatten also als Link teilen.
So funktioniert’s
- Wähle eine Vorlage oder starte mit dem voreingestellten Schatten.
- Verschiebe die Regler für Versatz, Unschärfe, Ausdehnung und Deckkraft und wähle die Farbe jeder Ebene.
- Füge bei Bedarf weitere Ebenen hinzu oder mache eine Ebene mit „Innen“ zum Innenschatten.
- Kopiere den CSS-Code in dein Stylesheet.
Häufige Fragen
Was bedeuten Unschärfe und Ausdehnung?
Die Unschärfe (blur) bestimmt, wie weich der Rand des Schattens ausläuft. Die Ausdehnung (spread) vergrößert oder verkleinert den Schatten vor dem Weichzeichnen. Ein negativer Wert sorgt dafür, dass der Schatten nur unten sichtbar ist und nicht an den Seiten herausragt.
Warum mehrere Schattenebenen?
Echtes Licht erzeugt einen dunkleren, engen Schatten direkt unter dem Objekt und einen hellen, weiten Schatten drumherum. Zwei oder mehr übereinandergelegte Ebenen ahmen das nach und wirken deutlich natürlicher als ein einzelner Schatten.
Was ist der Unterschied zu filter: drop-shadow()?
box-shadow folgt immer dem Rechteck (mit Eckenradius) des Elements. drop-shadow() folgt der sichtbaren Form, also z. B. den Umrissen eines transparenten PNG oder SVG, kennt aber keine Ausdehnung und keinen Innenschatten.
Wie wähle ich eine passende Schattenfarbe?
Statt reinem Schwarz wirkt oft ein sehr dunkler Ton der Hintergrundfarbe mit geringer Deckkraft harmonischer. Passende Töne findest du mit dem Farbpaletten-Generator, für einen weichen Hintergrund eignet sich ein Verlauf aus dem CSS-Verlauf-Generator.