Schatten geben einer Oberflaeche Tiefe. Eine Karte, die leicht ueber dem Hintergrund zu schweben scheint, wirkt sofort hochwertiger als eine flache Flaeche. In CSS erledigt das die Eigenschaft box-shadow. Sie sieht auf den ersten Blick einfach aus, hat aber vier Parameter, die zusammen ueber Wirkung oder Kitsch entscheiden. Dieser Artikel erklaert jeden Wert und worauf es bei realistischen Schatten ankommt.
Die Anatomie von box-shadow
Ein typischer Schatten sieht so aus: box-shadow: 0 4px 12px 0 rgba(0,0,0,0.15);. Die Werte stehen in fester Reihenfolge:
- Horizontaler Offset (X): Verschiebt den Schatten nach rechts (positiv) oder links (negativ). Fuer natuerliche Schatten meist 0 oder ein kleiner Wert.
- Vertikaler Offset (Y): Verschiebt den Schatten nach unten (positiv) oder oben. Da Licht meist von oben kommt, ist hier ein kleiner positiver Wert der Normalfall.
- Blur-Radius: Wie stark der Schatten verwischt. 0 ergibt eine harte Kante, hoehere Werte einen weichen, diffusen Rand. Das ist der wichtigste Wert fuer Realismus.
- Spread-Radius: Vergroessert (positiv) oder verkleinert (negativ) den Schatten, bevor der Blur greift. Negative Werte halten den Schatten kompakter unter dem Element.
Den fuenften Teil bildet die Farbe, fast immer als halbtransparentes Schwarz ueber rgba(). Genau diese Reihenfolge nimmt dir der Box Shadow Generator ab: Du stellst Offset, Blur, Spread und Deckkraft per Regler ein und kopierst die fertige box-shadow-Zeile direkt in dein Stylesheet.
Der Trick fuer realistische Schatten
Der haeufigste Fehler ist ein zu harter, zu dunkler Schatten direkt unter dem Element. Echte Schatten sind weich und transparent. Drei Faustregeln helfen:
- Wenig Offset, viel Blur: Ein kleiner Y-Versatz plus grosszuegiger Blur wirkt natuerlicher als ein stark versetzter, scharfer Schatten.
- Niedrige Deckkraft: Werte zwischen 0,08 und 0,2 reichen meist. Voll schwarze Schatten sehen schmutzig aus.
- Mehrere Layer stapeln: Profis kombinieren zwei oder drei Schatten, getrennt durch Komma – ein enger, dunklerer fuer den Kontakt und ein weiter, hellerer fuer das Umgebungslicht. Das ahmt nach, wie Schatten in der Realitaet entstehen.
inset: Schatten nach innen
Stellst du das Schluesselwort inset voran, faellt der Schatten nach innen statt nach aussen. Das eignet sich fuer eingedrueckte Felder, Eingabemasken oder den gedrueckten Zustand eines Buttons. Die vier Werte bleiben dieselben, nur die Richtung kehrt sich um.
Performance und Mass halten
Schatten werden von der GPU gerendert und sind in der Regel guenstig. Trotzdem gilt: Sehr grosse Blur-Werte auf vielen Elementen oder animierte Schatten koennen die Bildrate druecken. Wer Schatten animieren will, blendet besser einen vorbereiteten zweiten Schatten ueber opacity ein, statt die box-shadow-Werte live zu veraendern.
Schatten kommen selten allein: Oft willst du gleichzeitig die Ecken runden – das uebernimmt der Border Radius Generator. Geht es um Schatten auf Text statt auf Boxen, ist der Text Shadow Generator das richtige Werkzeug. Weitere CSS-Helfer sammeln wir unter kotsch.tech/webtools.
Fazit
box-shadow ist mit vier Werten schnell erklaert, aber die Wirkung steht und faellt mit Mass. Wenig Versatz, viel weicher Blur, dezente Deckkraft und bei Bedarf mehrere gestapelte Ebenen ergeben Schatten, die Tiefe vermitteln, ohne aufdringlich zu sein. Den exakten Code stellst du am schnellsten visuell zusammen und kopierst ihn fertig in dein Projekt.