CSS Box-Shadow
Responsive-Arbeit hat gezeigt, wann sich das Layout ändert. Box-Shadow eröffnet Effects & Motion: weiche Tiefe um eine Karte, ein gedrückter Look in einem Feld oder ein ruhiges Anheben eines Buttons — gemalt mit einer Eigenschaft, box-shadow, ohne die Box-Model-Größe zu ändern.
Teile des Schattens
📊 box-shadow-Teile auf einen Blick
| Teil | Alltagsaufgabe |
|---|---|
offset-x / offset-y |
Wo der Schatten relativ zur Box sitzt (positiv = rechts / unten) |
blur-radius |
Weichheit — 0 ist hartkantig; größere Werte federn die Kante aus |
spread-radius |
Optional; vergrößert oder verkleinert die Schattenform vor dem Blur |
color |
Meist rgba(...), damit der Schatten halbtransparent bleibt |
inset |
Optionales Schlüsselwort — zeichnet den Schatten innen in die Box |
| Mehrere Listen | Kommagetrennte Schatten stapeln sich (fern weich + nah knapper) |
Denk an Elevation, nicht an Dekorationsspam. Eine weiche Schicht unter einer Karte schlägt oft drei laute Umrisse.
Weiche äußere Elevation
Ein übliches Kartenrezept: kleiner Offset nach unten, mittlerer Blur, wenig oder kein Spread und ein durchscheinendes Schwarz (oder Grau). Der Schatten soll Licht von oben andeuten — kein schwarzes Rechteck, das hinter der Box klebt.
.card {
background: #fff;
border-radius: 0.75rem;
padding: 1.25rem;
box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.12);
}
Positives offset-y legt den Schatten unter die Box. Alpha niedrig halten, damit Text und Nachbarn lesbar bleiben.
inset — Tiefe innen in der Box
Mit dem Schlüsselwort inset wird der Schatten nach innen gezeichnet. Nützlich für Vertiefungen, gedrückte Buttons oder Eingabefelder, die etwas eingelassen wirken sollen.
.field {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
padding: 0.75rem 1rem;
box-shadow: inset 0 0.125rem 0.35rem rgba(15, 23, 42, 0.08);
}
inset ersetzt weder border noch padding — es ändert nur, wie Licht innerhalb der gemalten Fläche zu fallen scheint.
Geschichtete Schatten
Mehrere Schatten kommagetrennt auflisten. Eine ferne weiche Schicht plus eine nähere, engere Schicht wirkt oft wie natürliche Elevation — ohne schweren Umriss.
.panel {
background: #fff;
border-radius: 1rem;
box-shadow:
0 0.125rem 0.25rem rgba(15, 23, 42, 0.06),
0 0.75rem 1.5rem rgba(15, 23, 42, 0.1);
}
Die Reihenfolge in der Liste ist die Malreihenfolge; beide gehören trotzdem zum selben Element. Zwei ruhige Schichten sind besser als ein undurchsichtiger Klecks.
Zurücksetzen, Akzent und Fokus auf die Box
Mit box-shadow: none wird ein Zustand wieder flach. Ein getönter Schatten kann einen Markenakzent stützen — Blur weiter weich, Alpha bescheiden. Merke: Glyphen nutzen text-shadow (Text Effects); Boxen nutzen box-shadow.
.chip {
box-shadow: none;
}
.chip.is-accent {
box-shadow: 0 0.35rem 0.9rem rgba(37, 99, 235, 0.28);
}
Selbst ausprobieren
- Gib einer weißen Karte einen einzelnen weichen Außenschatten (
0x-Offset, kleines y, Blur ~1rem, niedrige Alpha). - Füge einem Suchfeld einen
inset-Schatten hinzu, damit es leicht eingelassen wirkt. - Baue ein Panel zu einem Zweischicht-Stack aus (nah + fern).
- Finde jeden soliden schwarzen
box-shadowin einer Übungsdatei und weiche ihn mitrgbaauf. - Prüfe, dass ein Überschriften-Glow
text-shadownutzt, nichtbox-shadow.
Häufige Fehler
- Völlig undurchsichtige schwarze Schatten, die wie doppelte Boxen wirken
- Blur und Spread als denselben Regler behandeln
box-shadowauf Text setzen, obwohltext-shadowgemeint war- Jeden Listenpunkt, Link und jedes Icon beschatten, bis die Seite vernebelt wirkt
insetvergessen, wenn das Design einen gedrückten oder hohlen Look braucht
Kurzfassung
box-shadownutzt Offset, Blur, optional Spread, Farbe und optionalinset- Weiche, halbtransparente Außenschatten verkaufen ruhige Elevation
- Kommagetrennte Schichten stapeln für mehr Tiefe; mit
nonewieder flach - Box ≠ Glyphe —
text-shadowfür Text reservieren - Weiter in Effects & Motion: Transitions
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt