Voreinstellungen

Anleitung

1. Ziehen Sie die Regler, um horizontalen/vertikalen Versatz, Unschärfe, Streuung und Deckkraft anzupassen.
2. Wählen Sie eine Schattenfarbe und schalten Sie „inset" bei Bedarf ein.
3. Klicken Sie auf „Schattenebene hinzufügen", um mehrere Schatten zu stapeln.
4. Verwenden Sie eine Voreinstellung als schnellen Ausgangspunkt.
5. Klicken Sie auf „CSS kopieren", um das Ergebnis in Ihr Stylesheet einzufügen.

Häufig gestellte Fragen

Was ist box-shadow in CSS?

Die CSS-Eigenschaft box-shadow fügt Schatteneffekte um ein Element herum hinzu. Sie nimmt Werte für horizontalen Versatz, vertikalen Versatz, Unschärferadius, Streuradius und Farbe entgegen.

Kann ich mehrere Schatten hinzufügen?

Ja. Klicken Sie auf „Schattenebene hinzufügen", um einen weiteren Schatten zu ergänzen. Mehrere Schatten werden in der CSS-Ausgabe durch Kommas getrennt. So können Sie komplexe geschichtete Effekte erzeugen.

Was bewirkt das Schlüsselwort inset?

Das Hinzufügen von „inset" lässt den Schatten innerhalb des Elements statt außerhalb erscheinen, es entsteht ein Innenschatten oder ein „eingedrückter" Effekt.

Die fünf Parameter von box-shadow

CSS-box-shadow fügt der Border-Box eines Elements einen oder mehrere Schlagschatten-Effekte hinzu. Die Grammatik lautet box-shadow: <color>? <offset-x> <offset-y> <blur-radius>? <spread-radius>? inset?, wobei mehrere Schatten durch Kommas getrennt werden. Jeder Parameter erfüllt eine bestimmte Aufgabe:

• offset-x: Strecke, um die der Schatten horizontal verschoben wird. Positiv bewegt nach rechts; negativ nach links. 0 zentriert horizontal.
• offset-y: vertikale Verschiebung. Positiv bewegt nach unten (ahmt Beleuchtung von oben nach, die häufigste UI-Konvention). Negativ nach oben.
• blur-radius: wie weit die Kante des Schattens zu Transparenz verblasst. Als Gauß-Faltung implementiert; größere Werte erzeugen weichere, größere, diffusere Schatten. Negative Werte sind ungültig; 0 erzeugt eine harte, scharfe Kante.
• spread-radius: vergrößert (positiv) oder verkleinert (negativ) die Schattenform, bevor die Unschärfe angewendet wird. Positiver Spread dehnt den Schatten in alle Richtungen aus; negativer zieht ihn zusammen, sodass Sie einen Schatten auf eine Seite der Box beschränken können.
• color: standardmäßig currentcolor (der eigene color-Wert des Elements, was gelegentlich überrascht). UI-Schatten verwenden fast immer ein Schwarz oder Fast-Schwarz mit niedrigem Alpha, rgba(0,0,0,0.05) bis rgba(0,0,0,0.25): weil rein schwarze Schatten schwer und unnatürlich wirken.
• Das Schlüsselwort inset malt den Schatten innerhalb der Box statt außerhalb. Verwendet für gedrückte Schaltflächenzustände, vertiefte Eingabe-„Wells“ und innere Leuchteffekte.

Der Browser setzt eine Liste von Schatten von vorne nach hinten zusammen: Der zuerst aufgeführte Schatten ist dem Betrachter am nächsten, der letzte am weitesten hinten. Das ist dieselbe Reihenfolge wie bei text-shadow und background, aber das Gegenteil davon, wie die meisten CSS-Regeln kaskadieren, eine häufige Überraschung für neue Autoren.

Material Designs Elevation-System mit zwei Schatten

Googles Material Design (im Mai 2014 eingeführt; Material Design 3 im Jahr 2021) definiert ein quantisiertes Elevation-System, in dem UI-Flächen auf einer von mehreren dichteunabhängigen Pixelebenen liegen. Das Schattenrezept verwendet auf jeder Ebene zwei gestapelte Schatten:

• Umbra (Kernschatten), kleiner, dunkler, steht für das direkt blockierte Licht unter der Fläche. Kurzer Offset und kurze Unschärfe.
• Penumbra (Umgebungsschatten), größer und diffuser, steht für das im Raum gestreute Licht. Größerer Offset, größere Unschärfe, hellerer Alpha.

In Material Design 2 reichen die Elevation-Werte von 0dp (kein Schatten) bis 24dp; Karten verwenden in Ruhe typischerweise 1 bis 2dp und animieren bei Hover auf 8dp, während modale Dialoge 24dp verwenden. Material Design 3 verdichtete die Skala auf fünf benannte Stufen (1 bis 5) und fügte bei dunklen Themes zusätzlich zu den Schlagschatten getönte Overlays hinzu. Die Struktur aus Umbra plus Penumbra bleibt das visuelle Modell, und deshalb wird Tailwinds shadow-md als zwei gestapelte Schatten ausgeliefert: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06).

Neumorphismus: der Trend, der zwei entgegengesetzte Schatten brauchte

Neumorphismus (ein Kofferwort aus „new“ und „skeuomorphism“) erlangte Ende 2019 / Anfang 2020 virale Popularität, nachdem ein Dribbble-Beitrag des ukrainischen Designers Alexander Plyuto vom Dezember 2019 mit dem Titel „Skeuomorph Mobile Banking“ innerhalb von Wochen Zehntausende Likes sammelte. Das prägende Rezept besteht aus zwei Box-Schatten auf einem Element mit derselben Hintergrundfarbe wie sein Elternelement: ein dunklerer Schatten unten rechts und ein hellerer Schatten oben links. Die dunkle Seite simuliert, wie die Fläche von einer Lichtquelle zurückweicht; die helle Seite simuliert, wie sie sich auf der dem Licht zugewandten Seite zu einem Glanzlicht anhebt. Das Umkehren der Offsets (oder das Hinzufügen von inset zu beiden) erzeugt ein vertieftes/gedrücktes Aussehen.

Ehrlicher Hinweis zur Barrierefreiheit: Neumorphismus wurde vielfach kritisiert, weil der visuelle Kontrast zwischen einem Element und seinem Hintergrund zwangsläufig sehr gering ist, sie teilen sich eine Farbe. Schaltflächen und Eingabefelder können WCAG 1.4.11 (Nicht-Text-Kontrast, AA, Verhältnis 3:1 von UI-Komponenten gegen angrenzende Farben) verfehlen. Gedrückte und nicht gedrückte Zustände sind oft nur an der subtilen Schattenrichtung zu unterscheiden, die Screenreader nicht vermitteln können und die für jeden mit eingeschränktem Sehvermögen, Farbenblindheit oder Bildschirmblendung unsichtbar ist. Verwenden Sie den Stil sparsam auf dekorativen Flächen, nicht auf primären Bedienelementen.

box-shadow vs. filter: drop-shadow()

CSS Filter Effects definiert eine Alternative, filter: drop-shadow(<x> <y> <blur> <color>): die visuell ähnlich aussieht, aber mit einem entscheidenden Unterschied. box-shadow wirft einen Schatten des Border-Box-Rechtecks (durch border-radius abgerundet, falls vorhanden). drop-shadow wirft einen Schatten des Alphakanals des gerenderten Elements, einschließlich Kindelementen, transparenten PNGs, SVG-Formen mit Aussparungen, maskiertem Inhalt. Der häufigste Grund, drop-shadow zu wählen, ist, dass das Element, das Sie beschatten möchten, kein Rechteck ist, ein transparentes PNG-Icon, ein SVG-Logo, ein Sprechblasen-Dreieck.

	box-shadow	drop-shadow()
Spread-Parameter	Ja	Nein
Inset-Variante	Ja	Nein
Mehrere Schatten	Ja (Kommaliste)	Ja (Filter verketten)
Betrifft Nachfahren	Nein	Ja (gesamter Teilbaum)
Clipping	Kann über overflow:hidden hinausragen	Auf Filtergrenzen beschränkt
Performance	Compositor-freundlich	Löst einen Filterdurchlauf aus

Hinweise zur Performance

Box-shadow gehört zu den teureren CSS-Eigenschaften beim Echtzeit-Rendern. Die Kosten haben drei Treiber: Größe des Unschärfekernels (die Gauß-Unschärfe ist eine trennbare Faltung in zwei Durchgängen; eine Verdopplung der Unschärfe vervierfacht die Arbeit pro Pixel, sodass eine 100-Pixel-Unschärfe auf einer großen Karte die Bildrate beim Scrollen merklich senken kann), Schattenfläche (das durch Spread vergrößerte und durch die Unschärfe weiter gewachsene Rechteck muss die GPU rastern, große Schatten von Modal-Overlays sind die teuerste Art) und Neuzeichnungen (das Animieren von box-shadow löst in jedem Frame eine Neuzeichnung des Schattenbereichs aus).

Praktische Empfehlungen:

• Für Hover-Elevation-Animationen animieren Sie besser transform: translateY() und opacity statt box-shadow. Diese sind GPU-beschleunigt und lösen kein Neuzeichnen aus.
• Für einen Schattenwechsel bei Hover deklarieren Sie beide Schatten auf einem Pseudoelement, den größeren mit opacity: 0, und animieren dann die Deckkraft des Pseudoelements. Das tauscht Schatten aus, ohne den Unschärfekernel selbst zu animieren, Tobias Ahlins „Shadow Tricks“ (2017) ist der maßgebliche Beitrag dazu.
• will-change: transform kann dem Browser nahelegen, ein Element auf eine eigene Compositor-Ebene zu heben. Sparsam verwenden, viele Elemente hochzustufen verschwendet GPU-Speicher.
• Vermeiden Sie box-shadow auf Elementen, die große Mengen scrollender Inhalte enthalten. Jeder Scroll-Frame muss den Schatten neu zeichnen.

Barrierefreiheit

Schatten sind, was den Accessibility-Tree betrifft, dekorativ (Screenreader ignorieren sie), aber sie haben Auswirkungen:

• WCAG 1.4.11 Nicht-Text-Kontrast (AA, 3:1). Wenn eine Karte oder Schaltfläche nur durch einen Schatten von ihrem Hintergrund unterschieden wird, definiert dieser Schatten faktisch die sichtbare Kante, und ein schwacher rgba(0,0,0,0.05)-Schatten auf einem fast weißen Hintergrund erreicht die Schwelle von 3:1 möglicherweise nicht. Viele Designsysteme kombinieren Schatten plus einen 1px-Vollrahmen, um den Kontrast zu gewährleisten.
• Fokus-Indikatoren. box-shadow: 0 0 0 3px <color> ist die moderne Alternative zum Standard-outline des Browsers, weil es border-radius folgt. Der Ring muss WCAG 2.4.7 Fokus sichtbar erfüllen, mindestens 2 CSS-Pixel dick, mit 3:1-Kontrast gegen den nicht fokussierten Zustand und angrenzende Farben.
• Forced-Colors / Windows High Contrast. Im Modus forced-colors: active ignorieren Browser die meisten CSS-Farben und färben Inhalte mit der Systempalette des Nutzers neu ein. Box-Schatten werden entfernt oder reduziert; UI-Zustände sollten für diese Nutzer immer einen Indikator ohne Schatten haben (Rahmenänderung, Farbänderung, Icon, Textbeschriftung).
• Reduzierte Bewegung. Nutzer mit prefers-reduced-motion: reduce sollten keine großen Schattenanimationen bei Hover oder Scrollen sehen. Verpacken Sie animierte Übergänge in eine Media Query und halten Sie für diese Nutzer den Ruhe-Schatten.

Schnelle Rezepte

Effekt	CSS
Dezente Kartenanhebung	0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
Weiche moderne Karte	0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)
Starke Modal-Anhebung	0 25px 50px -12px rgba(0,0,0,0.25)
Scharfer 1px-Stempel	0 0 0 1px rgba(0,0,0,0.05)
Fokusring (3px)	0 0 0 3px rgba(59,130,246,0.5)
Inset-Eingabe „Well“	inset 0 2px 4px 0 rgba(0,0,0,0.06)
Leucht-Halo	0 0 20px 4px rgba(99,102,241,0.6)

Weitere Fragen

Warum wird mein Schatten abgeschnitten?

Fast immer, weil ein Vorfahrenelement overflow: hidden hat. Der Schatten reicht über die Border-Box hinaus, wird aber an der Kante des Vorfahren abgeschnitten. Zwei Lösungen: den Schatten auf den Vorfahren selbst heben oder ein umschließendes Element ohne Overflow-Clipping verwenden. filter: drop-shadow() hat dieses Problem nicht, aber eigene Kompromisse.

Sollte ich noch Hersteller-Präfixe wie -webkit-box-shadow verwenden?

Nein. Das präfixlose box-shadow wird seit etwa 2012 allgemein unterstützt. Hersteller-Präfixe sind in Code von 2026 reines Rauschen und sollten entfernt werden. CSS-Reset-Bibliotheken aus den frühen 2010er-Jahren lieferten sie oft vorsorglich mit; moderner Code kann sie bedenkenlos weglassen.

Wie wende ich einen Schatten auf Text an, nicht auf die Box?

Verwenden Sie text-shadow, das dieselbe Syntax aus Offset / Unschärfe / Farbe hat, aber kein Spread oder Inset. Für glyphenförmige Schatten auf stilisiertem Text (z. B. Verlaufstext mit background-clip: text) ist filter: drop-shadow() auf dem Elternelement das richtige Werkzeug, box-shadow würde einen rechteckigen Schatten hinter die Glyphen werfen.

Warum sieht mein 0 0 0 2px-Schatten nicht weich aus?

Weil der dritte Wert (Unschärferadius) 0 ist. Ein reiner Spread-Schatten ohne Unschärfe erzeugt eine scharfe, durchgehende Umrandung, was genau das ist, was Sie für Fokusringe und „Fake-Outline“-Tricks wollen, aber nicht für weiche Elevation. Fügen Sie etwas Unschärfe hinzu: 0 0 4px 0 rgba(0,0,0,0.2).

Werden Daten an einen Server gesendet?

Nein. Die Vorschau wird in Ihrem Browser neu gerendert, während Sie die Schieberegler ziehen; der CSS-String wird lokal erzeugt; das Kopieren schreibt in Ihre Zwischenablage. Die Seite funktioniert offline, sobald sie geladen ist.

Verwandte Werkzeuge