CSS Box Shadow Beispiele: 40 Schatten zum Kopieren
CSS Box Shadow Beispiele
CSS Box Shadow Beispiele: 40 Schatten zum Kopieren als CSS oder Tailwind
40 eigene box-shadow-Beispiele, die du ansehen und als CSS oder Tailwind-Klasse kopieren kannst: weich, mehrschichtig, nur unten, inset, farbig, Dark Mode und eine Elevation-Skala.
Ein Box Shadow wird als box-shadow: x-offset y-offset blur spread color geschrieben, optional mit dem Schlüsselwort inset. Weiche, realistische Schatten stapeln meist zwei oder drei Ebenen mit geringer Deckkraft, und ein Schatten nur an der Unterseite nutzt einen positiven y-Offset mit negativem Spread. Wähle eines der 40 Beispiele unten und kopiere es als CSS oder Tailwind.
Die fünf Bestandteile eines box-shadow-Werts
Bestandteil
Beispiel
Was er bewirkt
x-Offset
Verschiebt den Schatten nach rechts (positiv) oder links (negativ)
y-Offset
Verschiebt den Schatten nach unten (positiv) oder oben (negativ)
Blur-Radius
Macht die Kante weicher; darf nicht negativ sein; 0 ergibt eine harte Kante
Spread-Radius
-6px
Vergrößert (positiv) oder verkleinert (negativ) den Schatten vor dem Weichzeichnen
rgb(0 0 0 / 0.15)
Nutzt die Textfarbe des Elements, wenn du sie weglässt
Zeichnet den Schatten innerhalb des Rahmens statt außerhalb
Die meisten Schattensammlungen liefern dir ein Bild und eine Zeile CSS. Diese hier erklärt zusätzlich, warum ein Schatten echt oder künstlich wirkt, gibt dir eine passende Elevation-Skala für dein Designsystem und zeigt, wie Schatten auf dunklen Hintergründen sichtbar bleiben. Jedes Beispiel ist eigenständig erstellt und läuft live in deinem Browser.
Filtere die Galerie nach Stil, etwa mehrschichtig, nur unten, inset oder farbig.
Jede Karte zeigt den Schatten auf einer echten Fläche. Stell den Hintergrund auf dunkel, um zu sehen, wie er dort wirkt.
Klicke auf eine Karte, um sie zu kopieren. Mit dem Umschalter wählst du reines CSS oder eine Tailwind-Klasse mit Arbitrary Value.
Für ein ganzes Produkt kopierst du statt einzelner Schatten besser die Elevation-Tokens weiter unten.
Nutze einen negativen Spread mit größerem y-Offset, damit der Schatten unter dem Element bleibt und nicht an den Seiten auftaucht.
Färbe Schatten mit einer dunklen Variante des Hintergrundtons statt mit reinem Schwarz, damit sie weniger schmutzig wirken.
Wenn ein Hover-Effekt ruckelt, animiere die Deckkraft eines Pseudo-Elements mit dem größeren Schatten, statt box-shadow selbst zu animieren.
box-shadow folgt border-radius, abgerundete Karten bekommen also ohne Zusatzaufwand abgerundete Schatten.
Häufige Fragen
Wie setze ich einen Box Shadow nur unten?
Gib dem Schatten einen positiven y-Offset und einen negativen Spread etwa in der Größe des Blurs, zum Beispiel box-shadow: 0 8px 6px -6px rgb(0 0 0 / 0.3). Der negative Spread zieht den Schatten links, rechts und oben ein, sodass nur der Teil sichtbar ist, der über die Unterkante hinaus nach unten geschoben wird.
Wie verwende ich mehr als einen Schatten?
Trenne die Schatten durch Kommas. Der erste Schatten in der Liste wird über allen anderen gezeichnet, setze also den engen, dunkleren Kontaktschatten an den Anfang und den breiten, blassen Umgebungsschatten ans Ende.
Warum verschwindet mein Schatten auf dunklem Hintergrund?
Ein schwarzer Schatten auf einer fast schwarzen Seite hat kaum Kontrast. Setze in dunklen Themes bei erhöhten Elementen auf eine hellere Flächenfarbe, füge einen dünnen hellen Rahmen oder ein 1px-Inset-Highlight hinzu und erhöhe die Deckkraft des Schattens, statt dich allein auf den Schatten zu verlassen.
Was ist der Unterschied zwischen box-shadow und drop-shadow()?
box-shadow folgt der Box des Elements und border-radius. filter: drop-shadow() folgt den sichtbaren Pixeln und schmiegt sich daher an transparente PNGs und SVG-Formen an, hat aber keinen Spread-Wert und keine Inset-Option.
Wie schreibe ich einen eigenen Schatten in Tailwind?
Nutze einen Arbitrary Value mit Unterstrichen statt Leerzeichen, etwa shadow-[0_8px_24px_-6px_rgb(0_0_0/0.2)]. Die eingebaute Skala reicht von shadow-2xs bis shadow-2xl, und inset-shadow-sm und Co. decken innere Schatten ab.
Warum mehrschichtige Schatten echter wirken
Echte Objekte werfen zwei Arten von Schatten gleichzeitig: einen kleinen dunklen genau dort, wo sie die Fläche berühren, und einen breiten blassen durch Licht, das im Raum reflektiert wird. Ein einzelner weichgezeichneter Schatten versucht, beides zu sein, und sieht am Ende aus wie ein grauer Heiligenschein.
Zwei bis vier Ebenen zu stapeln, jede mit etwa doppeltem Offset und Blur der vorherigen und geringerer Deckkraft, ahmt diese Mischung nach. Der Aufwand ist gering, aber sehr große Blur-Werte auf vielen Elementen können das Scrollen auf schwachen Geräten verlangsamen, beschränke schwere Schatten also auf wenige erhöhte Flächen.
Schatten als Skala, nicht als Einzelstück
Produkte wirken einheitlich, wenn jedes erhöhte Element aus einer kurzen Stufenleiter wählt: ruhende Karten, Karten im Hover, Dropdowns, Dialoge. Speichere jede Stufe als Custom Property und verwende sie wieder, dann musst du bei einer späteren Änderung der Lichtrichtung nur eine Stelle anpassen.
Lass den y-Offset schneller wachsen als den x-Offset, der bei einer Lichtquelle direkt von oben bei null bleibt. Unterschiedliche Lichtrichtungen in verschiedenen Komponenten sind einer der schnellsten Wege, ein Interface wie zusammengestückelt aussehen zu lassen.
Box Shadow nur an der Unterseite
Ein negativer Spread verkleinert den Schatten auf allen Seiten, und der y-Offset schiebt ihn dann nach unten heraus. Halte den Spread nahe am negativen Blur-Wert, damit links und rechts nichts übersteht.
Drei Schatten nur unten
Von links: eine enge Kante, ein weicherer Fall und die dünne Linie, die unter Sticky Headern verwendet wird.
Eine wiederverwendbare Elevation-Skala
Fünf Stufen decken die meisten Interfaces ab. Jede verdoppelt Offset und Blur der vorherigen und behält darunter eine enge Kontaktebene.