Was ist der Unterschied zwischen box-shadow und filter: drop-shadow()?

box-shadow folgt der rechteckigen Box-Kontur (inklusive border-radius), drop-shadow folgt dem Alpha-Kanal des Elements (auch transparente PNGs). drop-shadow ist GPU-intensiver, daher box-shadow für Standard-Cards bevorzugen.

Warum sehe ich den Schatten in iOS Safari nicht?

iOS Safari rendert sehr große Blur-Werte in position: fixed -Containern manchmal nicht korrekt. Reduziere Blur auf unter 50 px oder nutze ein Container-Element ohne fixed positioning für den Schatten.

Wie animiere ich box-shadow ohne Performance-Probleme?

Statt box-shadow direkt zu animieren, lege ein Pseudo-Element ::after mit fertigem Schatten an und animiere dessen opacity . So bleibt die teure Gauß-Faltung statisch und nur die GPU-günstige Opacity ändert sich.

Welche Farbe nutze ich für realistische Schatten?

Reines Schwarz wirkt grafisch und schwer. Realistisch ist ein leicht entsättigtes Dunkelblau bzw. die dunkelste Variante deiner Markenfarbe, immer mit Alpha (10–25 %). Beispiel: rgba(15, 23, 42, 0.15) statt rgba(0,0,0,0.15) .

Funktioniert box-shadow im Dark Mode?

Ja, aber dunkle Schatten auf dunklem Grund sind kaum sichtbar. Im Dark Mode arbeiten viele Designsysteme stattdessen mit Surface-Overlays oder einem leichten Glow ( box-shadow: 0 0 20px rgba(255,255,255,0.05) ), um Tiefe zu signalisieren.

Wie viele Schatten sollten gestapelt werden?

Zwei bis drei Schatten reichen für realistische Tiefe: ein scharfer Kontakt-Schatten (kleiner Blur, geringer Offset), ein mittlerer Höhen-Schatten und ein weicher Ambient-Schatten. Mehr Layer kosten GPU ohne erkennbaren Mehrwert.

Startseite
CSS Tools
CSS Box-Shadow Generator

CSS Box-Shadow Generator

Erstelle einfache und mehrfache CSS-Schatten visuell mit Live-Vorschau.

Schatten {{ idx + 1 }}

Offset X {{ shadow.offsetX }}px

Offset Y {{ shadow.offsetY }}px

Blur {{ shadow.blur }}px

Spread {{ shadow.spread }}px

Farbe

Inset

Breite

Höhe

Hintergrund

Radius

Presets

CSS Code

{{ cssOutput }}

Was ist CSS box-shadow?

Die CSS-Eigenschaft box-shadow fügt einem Element einen oder mehrere Schatten hinzu. Schatten erzeugen Tiefe und lassen Elemente wie Karten, Buttons und Dialoge vom Hintergrund abheben. Du kannst Offset, Blur-Radius, Spread-Radius, Farbe und den Inset-Modus steuern.

Die box-shadow Syntax

Die Syntax lautet: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;. Offset-X und Offset-Y bestimmen die Position des Schattens. Blur-Radius steuert die Weichzeichnung, Spread-Radius vergrößert oder verkleinert den Schatten. Das Schlüsselwort inset erzeugt einen inneren Schatten. Mehrere Schatten werden kommagetrennt angegeben.

Tipps für gelungene Schatten

Verwende mehrere Schatten mit unterschiedlichem Blur für realistischere Ergebnisse.
Halte die Schatten-Farbe dezent — verwende transparente Schwarztöne statt harter Farben.
Inset-Schatten eignen sich hervorragend für eingedrückte Buttons und Eingabefelder.
Teste Schatten im Light und Dark Mode, da sie unterschiedlich wirken können.

box-shadow: Syntax und Wirkung im Detail

Die box-shadow-Property ist im CSS Backgrounds and Borders Module Level 3 spezifiziert. Die volle Syntax lautet box-shadow: [inset?] <offset-x> <offset-y> [<blur-radius>] [<spread-radius>] <color>. Offset-X verschiebt den Schatten horizontal (positiv = rechts), Offset-Y vertikal (positiv = unten). Der Blur-Radius ist die Standardabweichung der Gauß-Unschärfe; je größer, desto weicher und weiter verschwommen wird der Schatten. Der Spread-Radius vergrößert (positiv) oder verkleinert (negativ) den ganzen Schatten gleichmäßig — anders als Blur bleibt die Kante hart.

Das Keyword inset dreht den Schatten um — er erscheint im Inneren der Box, als wäre die Fläche eingedrückt. Insets eignen sich für Eingabefelder, gedrückte Buttons oder eingelassene Karten. Mehrere Schatten lassen sich kommagetrennt stapeln: box-shadow: 0 1px 2px #0001, 0 4px 8px #0001, 0 16px 32px #0001;. Der Browser malt sie von hinten nach vorne (letzter Wert unten, erster oben) — wer eine glaubwürdige Höhenwirkung will, schichtet drei bis vier Schatten mit unterschiedlichen Blur-Werten.

box-shadow respektiert border-radius automatisch — eine gerundete Box wirft einen passend gerundeten Schatten. Wichtig: der Schatten erweitert nicht die Klick-Fläche und nimmt keinen Layout-Platz ein, das macht ihn vorhersehbar in Grid- und Flex-Containern. Im Vergleich zu filter: drop-shadow() ist box-shadow rechteckig (folgt der Box-Kontur), während drop-shadow Alpha-basiert ist und auch transparente PNGs sauber umschattet — dafür aber GPU-intensiver. Bei einfachen UI-Karten ist box-shadow fast immer die richtige Wahl.

So nutzt du den Generator effizient

Mit ein paar Schritten bekommst du Schatten, die deine Hierarchie unterstützen statt sie zu zerstören.

Starte mit einem Preset, das deinem Stil entspricht: Subtle für Banking/Enterprise, Material für klassische Apps, Layered für moderne SaaS-Oberflächen.
Reduziere Blur und Spread, bis der Schatten weich aber definiert wirkt. Eine Faustregel: Blur ist 2–4x Offset-Y; Spread bleibt meist bei 0 oder einem leicht negativen Wert (–1 bis –2 px) für realistische Tiefe.
Stapele Schatten via Add Shadow, um Höhe glaubhaft zu simulieren. Ein scharfer Kontakt-Schatten (klein, niedriger Blur) plus ein weicher Umgebungs-Schatten (groß, hoher Blur) ist der Standard für Cards.
Wähle die Schattenfarbe mit Alpha-Wert über das achtstellige Hex (z. B. #00000033 = 20 %). Reines Schwarz wirkt schwer, Markenfarbe + niedriges Alpha (z. B. #0d948833) wirkt eleganter.
Kopiere das CSS und ersetze Zahlenwerte durch Custom Properties wie var(--shadow-elevation-2), damit dein Designsystem die Tiefen-Skala zentral verwaltet.

Konkrete box-shadow-Beispiele

Diese Snippets sind erprobt und decken die wichtigsten Elevation-Stufen ab.

Karten-Schatten dezent: box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); — Tailwind-Standard shadow-sm.
Material Elevation 4: box-shadow: 0 2px 4px -1px #0003, 0 4px 6px #00000024, 0 1px 10px #0000001f;.
Modal-Overlay: box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); — passt für schwebende Dialoge in modernen UIs.
Inset für Eingabefeld: box-shadow: inset 0 2px 4px rgba(0,0,0,0.06); — leichter Eindrück-Effekt, gut für Search-Bars.
Hover-Lift: box-shadow: 0 10px 25px -5px rgba(13,148,136,0.25); kombiniert mit transform: translateY(-2px); für interaktives Feedback.

Performance-Kosten und Grenzen

box-shadow mit Blur ist GPU-beschleunigt, aber nicht kostenlos: Jeder Blur-Pixel muss als Gauß-Faltung über einen Bereich von ungefähr 2 * blur Pixeln berechnet werden. Bei Blur 64 px auf einem 1920x1080-Display sind das mehrere Hundert MB Speicher-Bandbreite pro Frame. Auf älteren Mobilgeräten und in iOS Safari führt das zu Frame-Drops, besonders wenn der Schatten animiert wird. Tipps: Vermeide animierte box-shadow auf langsamen Geräten — animiere stattdessen transform und opacity, die auf der Compositor-Ebene laufen. Wenn ein Schatten statisch ist, ist die Kostenstelle gering. Auf Hintergründen mit Transparenz oder Wallpaper kann ein dunkler Schatten unsichtbar werden — testen mit Dark Mode und unterschiedlichen Surface-Tönen. Schließlich: Schatten ist rein dekorativ; WCAG schreibt sie nicht vor, aber sie müssen die Lesbarkeit von Text auf der Karte nicht beeinträchtigen — Spread-Werte über 10 px in Markenfarbe können Kontraste am Kartenrand reduzieren.

Häufige Fragen zu box-shadow

Was ist der Unterschied zwischen box-shadow und filter: drop-shadow()?: box-shadow folgt der rechteckigen Box-Kontur (inklusive border-radius), drop-shadow folgt dem Alpha-Kanal des Elements (auch transparente PNGs). drop-shadow ist GPU-intensiver, daher box-shadow für Standard-Cards bevorzugen.
Warum sehe ich den Schatten in iOS Safari nicht?: iOS Safari rendert sehr große Blur-Werte in position: fixed-Containern manchmal nicht korrekt. Reduziere Blur auf unter 50 px oder nutze ein Container-Element ohne fixed positioning für den Schatten.
Wie animiere ich box-shadow ohne Performance-Probleme?: Statt box-shadow direkt zu animieren, lege ein Pseudo-Element ::after mit fertigem Schatten an und animiere dessen opacity. So bleibt die teure Gauß-Faltung statisch und nur die GPU-günstige Opacity ändert sich.
Welche Farbe nutze ich für realistische Schatten?: Reines Schwarz wirkt grafisch und schwer. Realistisch ist ein leicht entsättigtes Dunkelblau bzw. die dunkelste Variante deiner Markenfarbe, immer mit Alpha (10–25 %). Beispiel: rgba(15, 23, 42, 0.15) statt rgba(0,0,0,0.15).
Funktioniert box-shadow im Dark Mode?: Ja, aber dunkle Schatten auf dunklem Grund sind kaum sichtbar. Im Dark Mode arbeiten viele Designsysteme stattdessen mit Surface-Overlays oder einem leichten Glow (box-shadow: 0 0 20px rgba(255,255,255,0.05)), um Tiefe zu signalisieren.
Wie viele Schatten sollten gestapelt werden?: Zwei bis drei Schatten reichen für realistische Tiefe: ein scharfer Kontakt-Schatten (kleiner Blur, geringer Offset), ein mittlerer Höhen-Schatten und ein weicher Ambient-Schatten. Mehr Layer kosten GPU ohne erkennbaren Mehrwert.