box-shadow casts a shadow around a box — the cheapest way to make a flat element look like it floats. You hand it a few numbers and a colour, and the browser paints the depth for you.
Where you meet it
- Cards and panels that lift off the page — soft, far shadows.
- Buttons that look pressed in — that's
inset. :focusrings for keyboard users — a hard 0-blur spread shadow.
What it does
It draws a copy of the box's shape, shifts it, blurs it, resizes it, tints it — then paints it behind (or inside) the element. The box's own layout doesn't move; the shadow takes up no space.
One hard shadow looks fake. Real depth is two or three soft ones stacked, each at low opacity.
How it works
The values come in a fixed order: offset-x offset-y blur spread color. Only the two offsets are required.
box-shadow: 8px 12px 24px 0 rgba(0,0,0,.15);
/* x y blur spread color */- offset-x — moves the shadow right (negative = left).
- offset-y — moves it down (negative = up).
- blur — softens the edge:
0is a hard shape, higher is a fuzzy halo. - spread — grows (positive) or shrinks (negative) the shadow before it blurs.
- color — usually a black at low alpha, like
rgba(0,0,0,.15).
Add the keyword inset to throw the shadow inward instead of outward. And you can stack several shadows in one rule, comma-separated — the first one sits on top:
box-shadow:
0 1px 2px rgba(0,0,0,.1), /* tight, close */
0 8px 24px rgba(0,0,0,.12), /* soft, far */
inset 0 0 0 1px rgba(0,0,0,.05); /* inner hairline */Watch out
- Blur ≠ spread. Blur fuzzes the edge; spread changes the shadow's size. A small negative spread keeps a big blur tucked tightly under a card.
- The shadow ignores
z-indexstacking the way you'd expect — butoverflow: hiddenon a parent will clip it. - One harsh, dark shadow looks fake. Real depth comes from layering a tight shadow over a soft one, both at low opacity.
Go deeper
box-shadow wirft einen Schatten um eine Box — der billigste Weg, ein flaches Element schweben zu lassen. Du gibst ein paar Zahlen und eine Farbe an, den Rest malt der Browser.
Wo es vorkommt
- Karten und Panels, die sich von der Seite abheben — weiche, ferne Schatten.
- Buttons, die gedrückt aussehen — das ist
inset. :focus-Ringe für Tastatur-Nutzer — ein harter Schatten mit 0 Blur und Spread.
Was es tut
Es zeichnet eine Kopie der Box-Form, verschiebt sie, zeichnet sie weich, ändert ihre Größe, färbt sie — und malt sie hinter (oder in) das Element. Das Layout der Box bewegt sich nicht; der Schatten braucht keinen Platz.
Ein harter Schatten wirkt unecht. Echte Tiefe sind zwei, drei weiche gestapelt, jeder mit niedriger Deckkraft.
Wie es funktioniert
Die Werte stehen in fester Reihenfolge: offset-x offset-y blur spread color. Pflicht sind nur die beiden Offsets.
box-shadow: 8px 12px 24px 0 rgba(0,0,0,.15);
/* x y blur spread Farbe */- offset-x — verschiebt den Schatten nach rechts (negativ = links).
- offset-y — verschiebt ihn nach unten (negativ = oben).
- blur — weicht die Kante auf:
0ist eine harte Form, höher ein verschwommener Hof. - spread — vergrößert (positiv) oder verkleinert (negativ) den Schatten vor dem Weichzeichnen.
- color — meist ein Schwarz mit niedriger Deckkraft, etwa
rgba(0,0,0,.15).
Das Keyword inset wirft den Schatten nach innen statt nach außen. Und du kannst mehrere Schatten in einer Regel stapeln, mit Komma getrennt — der erste liegt oben:
box-shadow:
0 1px 2px rgba(0,0,0,.1), /* eng, nah */
0 8px 24px rgba(0,0,0,.12), /* weich, fern */
inset 0 0 0 1px rgba(0,0,0,.05); /* innere Haarlinie */Worauf achten
- Blur ≠ Spread. Blur weicht die Kante auf; Spread ändert die Größe des Schattens. Ein kleiner negativer Spread hält einen großen Blur eng unter der Karte.
- Ein
overflow: hiddenbeim Elternelement beschneidet den Schatten — daran scheitern viele Karten-Layouts. - Ein einzelner harter, dunkler Schatten wirkt unecht. Echte Tiefe entsteht durch Stapeln: ein enger Schatten über einem weichen, beide mit niedriger Deckkraft.