box-shadow nimmt vier Längen und eine Farbe, und der schnellste Weg zu verstehen, was jede tut, ist sie zu ziehen und zuzusehen. Die Syntax lautet offset-x, offset-y, Weichzeichnung, Ausdehnung, Farbe — plus das optionale Schlüsselwort inset, das den Schatten nach innen kippt.
Ein Schatten belegt überhaupt keinen Platz
Das ist die nützlichste Eigenschaft dieser Property und leicht zu übersehen. Ein Schatten wird gemalt, nicht layoutet. Gib einem Element einen Schatten mit 80 Pixeln Weichzeichnung und 80 Pixeln Ausdehnung — ein Schatten, der sich 160 Pixel in jede Richtung erstreckt — und das Element daneben bewegt sich keinen einzigen Pixel. Nichts fließt um, nichts verrutscht.
Deshalb ist box-shadow das richtige Werkzeug für Fokusringe und Hover-Zustände, und border das falsche. Beim Hover einen 2px-Rahmen hinzuzufügen schiebt alles ringsum zwei Pixel; einen 2px-Schatten hinzuzufügen nicht. Der alte Trick, vorab einen transparenten Rahmen zu setzen, um den Platz zu reservieren, wird überflüssig, sobald du stattdessen zum Schatten greifst.
Die Weichzeichnung ist nicht die Zahl, die du denkst
Der Weichzeichnungsradius ist nicht die Standardabweichung der Gaußschen Unschärfe — die Spezifikation definiert ihn als deren Doppeltes. Eine Weichzeichnung von 12px erzeugt eine Gaußkurve mit Sigma 6. Das zählt genau dann, wenn du einen Schatten an ein in Figma oder Sketch erstelltes Design angleichen willst, wo der Blur-Wert etwas leicht anderes bedeutet, und dein CSS immer weicher oder enger herauskommt als das Mockup.
Praktisch heißt das: Der Schatten läuft über etwa den Weichzeichnungsradius auf jeder Seite der Kante aus. Eine 12px-Weichzeichnung ist ein weicher Übergang von etwa 12 Pixeln Breite, und die sichtbare Ausdehnung des Schattens ist ungefähr Versatz plus Ausdehnung plus Weichzeichnung.
Die Ausdehnung ist der Parameter, den alle ignorieren — auch negative
Die Ausdehnung vergrößert oder verkleinert die Schattenform vor dem Weichzeichnen. Positive Ausdehnung macht den Schatten größer als das Element, was sich wie eine weiter entfernte Lichtquelle liest. So weit, so schlicht.
Negative Ausdehnung ist die interessante, und daher kommen realistische Schatten. Ein Objekt nahe an einer Oberfläche wirft einen engen, dunklen Schatten direkt darunter; ein weit entferntes wirft einen großen, diffusen. Echte Erhebung sieht aus wie ein kleiner Versatz mit negativer Ausdehnung, nicht wie eine große Weichzeichnung. Ein Schatten 0 10px 10px -5px ist enger und glaubwürdiger als 0 10px 20px 0 — die negative Ausdehnung zieht die Kanten herein, sodass der Schatten nicht seitlich unter dem Element hervorquillt.
Ein Schatten sieht selten richtig aus — dieses Tool macht einen
CSS erlaubt beliebig viele kommagetrennte Schatten auf einem Element, und das ist der größte Unterschied zwischen einem Schatten, der gestaltet wirkt, und einem, der nach CSS-Standard aussieht. Echte Objekte werfen nicht einen Schatten; sie werfen einen engen, dunklen Kontaktschatten dort, wo sie die Oberfläche berühren, und einen breiteren, weichen weiter außen.
Dieses Tool baut einen einzelnen Schatten — der richtige Weg, um zu lernen, was jeder Parameter tut. Wenn du ihn dann einsetzt, schichte zwei oder drei: etwas wie 0 1px 2px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.06) liest sich als Tiefe, wie es ein einzelnes 0 4px 12px rgba(0,0,0,0.15) nie ganz schafft. Jede Schicht sollte nach außen hin größer und transparenter werden.
Wo wir dabei sind: Schatten wirken überzeugender, wenn sie eine dunkle Variante des Hintergrundtons sind statt reines Schwarz. Schwarze Schatten auf farbiger Fläche sehen grau und tot aus, denn echte Schatten sind Bereiche, in denen weniger Licht auf eine Oberfläche fällt, die trotzdem ihre eigene Farbe hat.
Animiere ihn nicht
box-shadow ist keine billige Property zum Animieren. Jedes Bild zwingt den Browser, den Schatten neu zu zeichnen, und ein weichgezeichneter Schatten ist teuer zu rastern — animiere ihn auf einer Kartenliste, und du spürst den Einbruch der Bildrate auf einem Mittelklasse-Telefon.
Die übliche Lösung: Leg den Schatten auf ein Pseudoelement, positioniere es hinter der Karte und animiere stattdessen dessen Deckkraft. Opacity-Animationen übernimmt der Compositor und rührt die Paint-Phase nie an, die Kosten sind also praktisch null, egal wie groß der Schatten ist. Ein bisschen zusätzliches Markup für einen flüssigen Hover — und der Unterschied zwischen einer Oberfläche, die solide wirkt, und einer, die stottert.
Häufige Fragen
Wird irgendetwas an einen Server geschickt?
Nein. Dieses Tool ist als "client" gekennzeichnet: Die Vorschau ist dein eigener Browser, der das CSS rendert, und die erzeugte Regel wird aus den Slider-Werten in der Seite zusammengesetzt. Es wird nichts übertragen.
Was ist der Unterschied zwischen box-shadow und filter: drop-shadow?
box-shadow folgt der Box des Elements — einem Rechteck, oder einem abgerundeten, wenn du einen border-radius hast. filter: drop-shadow folgt der tatsächlich sichtbaren Form, inklusive Transparenz. Für ein PNG mit freigestelltem Logo oder ein unregelmäßiges SVG zeichnet box-shadow also den Schatten des Rechtecks darum, was falsch aussieht, und drop-shadow zeichnet die Kontur nach, was richtig aussieht. Für gewöhnliche rechteckige Karten ist box-shadow billiger und leistet dasselbe.
Warum erscheint mein inset-Schatten nicht?
Meist, weil das Element einen Hintergrund hat, der darüber gemalt wird, oder weil es kaum Größe besitzt. Ein inset-Schatten wird innerhalb der Padding-Box gezeichnet, über dem Hintergrund, aber unter dem Inhalt — ist das Element leer und ohne Höhe, gibt es nichts, worauf gezeichnet werden könnte. Es lohnt auch zu prüfen, ob du ihn nicht auf ein Element gelegt hast, dessen Inneres ein Kind vollständig ausfüllt.
Kann ein Schatten einem border-radius folgen?
Ja, automatisch. box-shadow verwendet die Form der Border-Box, ein abgerundetes Element bekommt also ohne Zusatzaufwand einen abgerundeten Schatten. Einer der Gründe, warum box-shadow einem handgezeichneten Schattenbild vorzuziehen ist — er bleibt korrekt, wenn sich der Radius ändert.
Wie mache ich einen Schatten nur auf einer Seite?
Versetze ihn weiter, als du ihn weichzeichnest, und zieh die Seiten mit negativer Ausdehnung herein. Etwas wie 0 8px 6px -6px black erzeugt einen Schatten, der nur unterhalb des Elements erscheint: Die negative Ausdehnung macht ihn schmaler als die Box, der Versatz drückt ihn nach unten, und die Weichzeichnung mildert den Rest. Der Versuch mit bloßem Versatz und ohne negative Ausdehnung lässt den Schatten immer seitlich hervorlugen.