Box-Shadow-Generator
Stelle Versatz, Unschärfe, Ausdehnung, Farbe und Deckkraft mit den Schiebereglern ein: Der Schatten ändert sich in Echtzeit, und der CSS-Code lässt sich sofort kopieren.
So liest du die box-shadow-Syntax
Die Werte stehen immer in derselben Reihenfolge: horizontaler Versatz, vertikaler Versatz, Unschärferadius, Ausdehnungsradius und Farbe. Der Versatz verschiebt den Schatten relativ zum Element, die Unschärfe macht seinen Rand weich, und die Ausdehnung vergrößert den Schatten (oder verkleinert ihn bei negativen Werten), bevor die Unschärfe angewendet wird. Das Schlüsselwort inset verlegt den Schatten ins Innere der Box, praktisch für „eingedrückte“ Effekte bei Eingabefeldern und gedrückten Buttons.
Tipps für einen realistischen Schatten
Überzeugende Schatten sind größtenteils transparent: Halte die Deckkraft zwischen 10 % und 30 % und erhöhe lieber die Unschärfe, statt die Farbe abzudunkeln. Wähle den Y-Versatz größer als den X-Versatz, denn in der realen Welt kommt das Licht meist von oben. Für mehr Tiefe kannst du mehrere Schatten durch Kommas getrennt stapeln: einen kleinen, scharfen nah am Element und einen großen, weichen weiter entfernt.
Ein Schatten verrät die Höhe
Im Design mit Ebenen ist ein Schatten keine Dekoration: Er zeigt, wie hoch ein Element über der Seite schwebt. Eine ruhende Karte hat einen kleinen, engen Schatten, ein über allem geöffnetes Menü einen großen, diffusen, und erst der Unterschied zwischen beiden macht klar, was über was liegt.
Deshalb sollten die Schatten einer Oberfläche gemeinsam gewählt werden, als Skala: zwei oder drei feste Stufen (ruhend, angehoben, im Vordergrund), immer gleich eingesetzt. Ein anderer Schatten bei jedem Element lässt eine Seite unordentlich wirken, selbst wenn jeder einzelne Schatten schön ist.
Zwei Schatten sind besser als einer
Überzeugende Schatten sind fast immer zwei übereinander: ein enger, dunkler direkt unter dem Objekt, der den Kontakt definiert, und ein breiter, sehr heller, der sich ringsum ausbreitet. So verhält sich echtes Licht, mit einem scharfen Schatten in der Nähe und einem diffusen Halbschatten weiter außen.
Der typische Fehler ist ein einziger sehr dunkler Schatten, der das Objekt wie auf einen grauen Hintergrund geklebt aussehen lässt. Bewährte Deckkraftwerte liegen zwischen 6 und 20 %: Auf dem Bildschirm des Designers sieht das nach fast nichts aus, und genau darum geht es.
Die Farbe eines Schattens ist nicht Schwarz
Ein rein schwarzer Schatten erstickt die Farben darunter und wirkt auf farbigem Hintergrund schmutzig. Ein realistischer Schatten übernimmt den Farbton des Hintergrunds, dunkler und gesättigter: Auf einer hellblauen Seite verändert ein sehr dunkles Blau statt Schwarz das Ergebnis mehr als jede Anpassung des Unschärferadius.
Denk außerdem daran, dass box-shadow das Layout nicht beeinflusst: Der Schatten ragt aus der Box heraus, ohne etwas zu verschieben, und kann von einem Container mit overflow: hidden abgeschnitten werden. Wenn ein Schatten grundlos verschwindet, liegt es fast immer daran.
Siehe auch
Um die Ecken desselben Elements abzurunden, gibt es den Border-Radius-Generator und für den Hintergrund den CSS-Farbverlauf-Generator. Die Schattenfarbe wählst du mit dem Farbwähler.