Was ist der Unterschied zwischen box-shadow und drop-shadow?

box-shadow legt den Schatten an das rechteckige Box-Modell deines Elements an – inklusive border-radius. filter: drop-shadow() arbeitet auf den tatsächlichen, sichtbaren Pixeln und folgt damit auch transparenten Konturen, etwa bei SVGs oder PNG-Icons. Bei normalen Cards reicht box-shadow, für SVGs nimmst du drop-shadow.

Wie schreibt man einen Schatten in CSS?

Box-Shadow: `box-shadow: 0 4px 8px rgba(0,0,0,0.1);` – die Werte stehen für X-Versatz, Y-Versatz, Blur und Farbe. Drop-Shadow: `filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));` – ohne Spread und ohne Inset, sonst gleich.

Was bedeutet inset bei box-shadow?

Mit dem Schlüsselwort `inset` wird der Schatten nicht nach außen, sondern ins Innere des Elements gezeichnet. Das ist nützlich für gedrückt wirkende Buttons, vertiefte Eingabefelder oder Inset-Border-Effekte. Bei drop-shadow gibt es kein inset.

Welche Farbe sollte ein Schatten haben?

In den meisten Fällen rgba(0, 0, 0, 0.05–0.2) – also schwarze Schatten mit niedriger Deckkraft. Halbtransparente Schatten passen sich dem Hintergrund an und wirken natürlich. Volle Farben wie #888 wirken schnell flach oder schmutzig.

Kann ich mehrere Schatten gleichzeitig setzen?

Ja. Trenne mehrere Schatten mit Komma: `box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.12);`. Ein scharfer Nahschatten plus ein weicher Fernschatten ergibt eine sehr realistische Tiefenwirkung.

Warum sieht mein Schatten an SVGs nicht richtig aus?

Wahrscheinlich nutzt du box-shadow – das zeichnet einen Schatten an die rechteckige Box, nicht an den SVG-Pfad. Wechsle zu `filter: drop-shadow(...)`, dann folgt der Schatten der tatsächlichen Form des Icons.

Wie wirken sich Schatten auf die Performance aus?

Einfache box-shadow-Werte sind günstig. Sehr große Blur-Werte, viele kombinierte Schatten oder filter: drop-shadow() können die GPU stärker belasten – vor allem bei vielen Elementen oder Animationen. Im Zweifel mit DevTools profilen.

Funktionieren Schatten in allen Browsern?

Ja. box-shadow und filter: drop-shadow() werden seit über zehn Jahren von allen modernen Browsern (Chrome, Firefox, Safari, Edge) ohne Vendor-Präfixe unterstützt.

Wie animiere ich Schatten ohne Ruckler?

Animationen direkt auf box-shadow oder filter sind teuer. Stattdessen einen zweiten Layer (z.B. ein Pseudo-Element) mit dem Ziel-Schatten platzieren und dessen opacity animieren – das nutzt die GPU optimal und bleibt flüssig.

CSS Drop Shadow Generator

Schatten für CSS-Elemente visuell entwerfen – mit Box-Shadow- und Drop-Shadow-Modus, Live-Vorschau und Copy-fertigem Code.

Vorschau

CSS

box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);

Modus

Position

X-Versatz

Y-Versatz

Blur

Spread

Farbe

Deckkraft

Das Wichtigste auf einen Blick

box-shadow legt einen Schatten auf das Box-Modell – ideal für Cards, Buttons, Modals.
filter: drop-shadow() folgt der Silhouette des Elements – ideal für SVGs und transparente Bilder.
Beide Varianten akzeptieren X-Versatz, Y-Versatz, Blur und eine Farbe; box-shadow zusätzlich Spread und Inset.
Halbtransparente Schatten (rgba mit niedriger Alpha) wirken in der Regel natürlicher als volle Farbe.
Der Generator gibt automatisch gültiges, kompaktes CSS aus – inklusive rgba()-Konvertierung von HEX + Opacity.

Schatten geben Interface-Elementen Tiefe und Hierarchie. In CSS gibt es zwei verbreitete Ansätze: `box-shadow` legt einen Schatten auf das Box-Modell des Elements und ist die Standardlösung für Cards, Buttons, Modals und Dropdowns. `filter: drop-shadow()` arbeitet dagegen pixelgenau auf der Element-Silhouette und ist die richtige Wahl für SVGs, transparente PNGs oder ausgefranste Shapes, bei denen die Box selbst nicht der gewünschte Schatten-Umriss ist.

Unser Generator erzeugt beide Varianten: Du wählst den Modus, schiebst per Slider Versatz, Weichzeichnung, Spread und Farbe, siehst das Ergebnis live und kopierst die fertige CSS-Zeile. So findest du in Sekunden den passenden Schatten – statt Werte im Editor zu raten und mehrfach zu reloaden.

Hintergrund & Anwendungen

box-shadow vs. drop-shadow

box-shadow: CSS-Eigenschaft, die einen Schatten an die rechteckige Box des Elements anlegt – inklusive border-radius.
filter: drop-shadow(): CSS-Filter, der einen Schatten an die tatsächliche Silhouette anlegt – auch bei transparenten Bereichen.
Performance: box-shadow ist günstiger zu rendern; filter erzwingt eine eigene Composite-Schicht.
Anwendung: box-shadow für Cards/Buttons, drop-shadow für SVG-Icons, transparente PNGs oder Text-Effekte.

Wert-Komponenten

X-Versatz: Horizontaler Versatz; positive Werte verschieben den Schatten nach rechts, negative nach links.
Y-Versatz: Vertikaler Versatz; positive Werte verschieben den Schatten nach unten, negative nach oben.
Blur: Weichzeichnungs-Radius. 0 = scharfer Schatten, höhere Werte = weichere Kanten.
Spread: Vergrößert (oder verkleinert bei negativen Werten) den Schatten gleichmäßig. Nur bei box-shadow.
Inset: Zeichnet den Schatten ins Innere des Elements – nützlich für gedrückte Buttons. Nur bei box-shadow.

Anwendungsfälle

Cards: Leichter Box-Shadow (z.B. 0 2px 8px rgba(0,0,0,0.08)) hebt Karten dezent vom Hintergrund ab.
Modals: Stärkerer Schatten (0 20px 40px rgba(0,0,0,0.2)) signalisiert klar Vordergrund-Ebene.
Buttons: Dezente Schatten geben Buttons Tiefe; im :active-Zustand kann inset für „gedrückt“-Look helfen.
SVG-Icons: Drop-Shadow folgt der Form, sodass auch komplexe Icons sauber Schatten werfen.
Glow-Effekte: Heller Box-Shadow ohne Versatz erzeugt einen Glow-Effekt rund um das Element.

Best Practices

Mehrere Schatten kombinieren: Ein scharfer Nahschatten plus ein weicher Fernschatten wirkt natürlicher als ein einzelner.
Halbtransparente Farben: rgba(0,0,0,0.1) statt #ccc gibt sauberere Schatten, die mit jedem Hintergrund funktionieren.
Konsistente Tokens: Definiere wenige Schatten-Stufen als CSS-Variablen (--shadow-sm, --shadow-md, --shadow-lg).
Dark Mode: Im Dark Mode wirken klassische Schatten oft schwach; ggf. dunklere oder breitere Varianten nutzen.
Performance: filter und große Blur-Werte sind GPU-intensiv – sparsam bei animierten oder gescrollten Elementen.

Wann box-shadow, wann drop-shadow?

Beide Varianten erzeugen Schatten – aber sie verhalten sich unterschiedlich, sobald dein Element transparente Bereiche hat oder eine ungewöhnliche Form besitzt.

1Rechteckige Box mit Hintergrundfarbe? → box-shadow. Kürzeste, schnellste, vom Browser am besten optimierte Lösung.
2Element mit border-radius? → box-shadow. Der Schatten folgt der Rundung automatisch.
3SVG-Icon ohne expliziten Hintergrund? → drop-shadow. Der Schatten folgt der Pfad-Silhouette.
4Text mit unregelmäßiger Form (z.B. Hand-Lettering als SVG)? → drop-shadow.
5Mehrere überlappende Layer mit gemeinsamen Schatten? → drop-shadow auf Container, da box-shadow nur die Box rendert.

Typische Schatten-Werte

Eine Auswahl gebräuchlicher Schatten-Varianten als Spickzettel.

Stil	CSS	Einsatz
Sehr dezent	0 1px 2px rgba(0,0,0,0.05)	Trennlinien-Ersatz, sehr leichte Erhebung
Card-Standard	0 2px 8px rgba(0,0,0,0.08)	Standard-Karten in Listen oder Dashboards
Hover-Card	0 4px 16px rgba(0,0,0,0.12)	Karten beim Hover deutlich anheben
Modal/Popover	0 20px 40px rgba(0,0,0,0.2)	Vordergrund-Layer wie Modals oder Dropdowns
Inset (gedrückt)	inset 0 2px 4px rgba(0,0,0,0.1)	Buttons im :active-Zustand, Eingabe-Felder
Glow	0 0 12px rgba(59,130,246,0.5)	Fokus-Highlight oder visueller Akzent
SVG-Drop	drop-shadow(0 2px 4px rgba(0,0,0,0.15))	Icons und transparente Grafiken

Häufig gestellte Fragen

Anleitung

1
Modus wählen: Box Shadow oder Drop Shadow
Box Shadow für rechteckige Elemente und Cards, Drop Shadow für SVGs und Elemente mit transparenten Bereichen.
2
Versatz, Blur und (bei Box) Spread einstellen
Schiebe X und Y für die Richtung, Blur für die Weichheit. Spread (nur Box-Shadow) vergrößert den Schatten gleichmäßig.
3
Farbe und Deckkraft festlegen
Wähle eine Schattenfarbe (Standard schwarz) und die Deckkraft per Slider. Der Generator kombiniert beide automatisch zu rgba().
4
CSS kopieren
Mit einem Klick auf „In Zwischenablage kopieren“ landet die fertige Zeile im Clipboard – direkt einsetzbar in deinem Stylesheet.
5
In dein Projekt einsetzen
Füge die Zeile in deine CSS-Klasse oder Inline-Style ein. Bei Bedarf mehrere Schatten mit Komma kombinieren.

Über Selbststarter

Selbststarter ist deine Sammlung kostenloser Online-Tools – aktuell Generatoren, bald auch Konverter und mehr. Alle Tools laufen im Browser, ohne Anmeldung, ohne Tracking.

#css
#box-shadow
#drop-shadow
#frontend
#design
#ui