CSS Schatten: box-shadow und text-shadow – Versatz, Weichzeichnung, Ausbreitung und mehrere Schatten

box-shadow: Versatz, Weichzeichnung, Ausbreitung, Farbe

box-shadow: x y blur spread color. Die ersten beiden Werte verschieben den Schatten waagerecht und senkrecht, der dritte zeichnet ihn weich, der vierte vergrößert oder verkleinert ihn in alle Richtungen, der letzte färbt ihn. 0 4px 12px rgba(0,0,0,.25) ist ein Schatten leicht nach unten, weich, halbtransparent – die verbreitete Form, die Licht von oben andeutet. Ein harter Schatten ohne Weichzeichnung, 6px 6px 0 #D9D5CF, wirkt wie eine gedruckte Platte.

Mehrere Schatten und inset

Mehrere Schatten werden mit Komma getrennt und von vorn nach hinten gezeichnet: Der erste liegt oben. Ein kleiner scharfer plus ein großer weicher Schatten ergeben glaubwürdigere Tiefe als ein einzelner. Das Schlüsselwort inset zeichnet den Schatten innerhalb der Box – für Eingabefelder, gedrückte Schaltflächen und Vertiefungen. Mit Ausbreitung ohne Versatz und ohne Weichzeichnung entsteht ein Rahmen, der keinen Platz im Layout einnimmt: 0 0 0 3px #7A2FB0.

.karte {
  box-shadow:
    0 1px 2px rgba(0,0,0,.2),
    0 8px 24px rgba(0,0,0,.15);
}

text-shadow

text-shadow: x y blur color – ohne Ausbreitung, ohne inset. Ein weicher dunkler Schatten hinter hellem Text auf einem Foto verbessert die Lesbarkeit; ein versetzter Schatten in der Hintergrundfarbe ergibt einen Prägeeffekt. Auch hier sind mehrere Schatten erlaubt. Die Referenzseite text-shadow beschreibt die Eigenschaft, die bereits in CSS 2 stand und in CSS 2.1 gestrichen wurde, bevor CSS 3 sie zurückbrachte.

Leistung: weiche Schatten kosten

Ein großer Weichzeichnungsradius auf vielen Elementen ist teuer, besonders beim Scrollen. Ein Schatten, der sich beim Schweben ändern soll, wird besser nicht animiert; stattdessen wird ein zweites Element oder Pseudoelement mit dem Zielschatten über opacity eingeblendet – die Eigenschaft, die der Browser günstig animiert.

Der Schatten als Rahmenersatz

Mit Weichzeichnung null und einem Ausbreitungswert wird aus dem Schatten eine gleichmäßige Kontur um die Box – und zwar eine, die keinen Platz belegt und dem Rundungsradius folgt. Das ist der übliche Weg, eine Auswahl oder einen Fokus zu zeigen, ohne dass das Layout springt: box-shadow: 0 0 0 3px … legt einen drei Pixel breiten Ring an, den man beliebig einfärben und mit einem Übergang versehen kann.

Weil mehrere Schatten erlaubt sind, lassen sich Ringe stapeln – ein heller innen, ein dunkler außen, und schon sitzt die Markierung auf jedem Untergrund sichtbar. Anders als beim Rahmen ist der Ring dabei nicht auf eine Seite beschränkbar, und anders als bei der Kontur folgt er der Rundung. Für einen Fokus, der in der Darstellung mit erzwungenen Farben bestehen bleiben muss, genügt er allein trotzdem nicht: Schatten werden dort oft nicht gezeichnet, weshalb eine durchsichtige Kontur zusätzlich notiert wird, die nur in diesem Fall sichtbar wird.

Eine glaubwürdige Erhebung bauen

Ein einzelner weicher Schatten sieht selten überzeugend aus, weil echtes Licht zwei Dinge zugleich erzeugt: einen kleinen, dunklen Kernschatten dicht am Objekt und einen großen, sehr blassen Halbschatten darum herum. Zwei bis drei gestapelte Schatten mit wachsendem Versatz, wachsender Weichzeichnung und abnehmender Deckkraft bilden das nach. Der Unterschied zu einem einzelnen Schatten ist deutlich, die Kosten sind dieselben Deklarationen in einer Zeile.

Zwei Regeln halten das Ergebnis zusammen. Erstens muss die Lichtrichtung über die ganze Seite gleich bleiben – wenn ein Element seinen Schatten nach unten wirft, dürfen die anderen ihn nicht zur Seite werfen. Zweitens gehört in den Schatten keine graue Farbe, sondern eine abgedunkelte Variante des Untergrunds mit einem Alphawert: Grau auf einem farbigen Hintergrund wirkt schmutzig, weil ein Schatten die Farbe darunter dämpft und nicht überdeckt. Und je höher ein Element schwebt, desto größer und blasser wird sein Schatten – daraus entsteht eine ablesbare Rangfolge zwischen Karte, Menü und Dialog.

Wo der Schatten hinfällt

Ein Schatten wird hinter der Box gezeichnet und deshalb von einem undurchsichtigen Nachbarn verdeckt, der später kommt. Das ist der Grund, warum der Schatten einer Karte auf der folgenden Karte nicht zu sehen ist, obwohl er dort hinreichen müsste – die Zeichenreihenfolge im normalen Fluss geht von oben nach unten, und die spätere Box liegt darüber.

Abhilfe schafft ein Stapelindex an der Karte, deren Schatten sichtbar bleiben soll, oder eine umgekehrte Reihenfolge über die Anordnung. Eine Ausbreitung mit negativem Wert verkleinert den Schatten übrigens gegenüber der Box, was ihn dichter unter das Objekt zieht und die verbreitete Kombination aus geringem Versatz nach unten und negativer Ausbreitung erklärt.

Schatten vor box-shadow: die Technik mit Hintergrundgrafiken

Das Tutorial Schatten mit CSS zeigt, wie Schatten vor box-shadow gebaut wurden: eine Grafik als Hintergrund eines zusätzlichen Elements, versetzt unter das Bild. Die Beispiele dort funktionieren weiter; für neue Stylesheets ist box-shadow der Weg ohne Grafik, ohne Zusatzelement und mit beliebiger Farbe.

Häufige Fragen