Warum mehrere Schattenebenen?

Echte Schatten sind nie ein einzelner weicher Klecks. Das Material-Elevation-System stapelt 2-3 Schatten: einen engen, dunklen, wenig gestreuten nahe der Kante plus einen breiteren, helleren weiter aussen. Die erste Ebene wird oben gezeichnet, die letzte unten - mit den Pfeiltasten umordnen.

Ein Inset-Schatten wird innerhalb der Padding-Box des Elements gezeichnet statt aussen. So entstehen gedrückte Buttons, eingelassene Eingabefelder oder Inner-Shadow-Effekte. Inset-Schatten liegen über dem Hintergrund, aber unter dem Inhalt, und drücken den Rahmen nicht hinaus.

Wie baue ich einen neumorphen Schatten?

Neumorphismus nutzt zwei gegensätzliche Schatten auf einer leicht getönten Fläche: einen dunklen unten rechts (`8px 8px 16px rgba(0,0,0,0.10)`) und ein helles Highlight oben links (`-8px -8px 16px rgba(255,255,255,0.85)`). Die Neumorphismus-Voreinstellung lädt diesen Stapel zum Anpassen. Der Effekt braucht eine leicht graue oder gefärbte Fläche - auf reinem Weiss verschwindet das Highlight.

Warum erscheint mein box-shadow nicht?

Drei übliche Verdächtige. (1) Ein Elternelement hat `overflow: hidden` und schneidet den Schatten ab. (2) Das Element ist inline - box-shadow braucht block, inline-block oder Flex-Item zum Rendern. (3) Das Element hat keinen Hintergrund, also bleibt ein Inset-Schatten unsichtbar, weil nichts zum Bemalen da ist.

Unterschied zwischen Weichzeichnen und Streuung?

Weichzeichnen weicht die Schattenkante auf - mehr Weichzeichnen = breiterer Verlauf. Streuung vergrössert oder verkleinert den Schatten vor dem Weichzeichnen - positive Werte machen ihn grösser als das Element, negative kleiner (nützlich für Schatten, die das Element 'anheben', indem sie schmaler bleiben).

box-shadow oder filter: drop-shadow?

`box-shadow` für rechteckige Boxen - günstiger zu rendern und unterstützt Multi-Layer + Inset. `filter: drop-shadow()` für nicht-rechteckige Formen wie PNGs mit Transparenz oder SVG-Icons, weil es dem Alphakanal statt der Bounding-Box folgt. Sie sind nicht austauschbar, wenn die Form kein Rechteck ist.

Wie viele Schattenebenen sind zu viel?

Ab 4-5 Ebenen wächst die sichtbare Tiefe nicht mehr und die Komposit-Kosten steigen. Materials Elevation deckelt aus diesem Grund bei 3 Ebenen pro Stufe. Wer mehr stapelt, kämpft wahrscheinlich gegen sich selbst - lieber die Streuung einer Ebene verdoppeln.

CSS-Box-Shadow-Generator

Mehrere CSS-Schatten mit Voreinstellungen, Live-Vorschau und kopierfertiger Deklaration stapeln.

Läuft in deinem Browser

Beliebig viele Ebenen stapeln. Jede Ebene: X-/Y-Offset, Weichzeichnen, Streuung, Hex-Farbe mit Deckkraft-Slider, Inset-Schalter, plus umsortieren und stummschalten. Mit einer Voreinstellung starten (Material-Elevation 1-16, Neumorphismus, Fokus-Ring, langer Schatten, Schein) oder von Grund auf bauen. Die Vorschau wechselt zwischen hellem und dunklem Hintergrund und ändert die Form (abgerundet, Pille, Kreis) - Schattendesign ist hintergrundabhängig, vor dem Ausliefern beide Flächen prüfen.

Voreinstellungen

Schatten-Ebenen

Weichzeichnen

Streuung

Deckkraft: 10%

Innen

Weichzeichnen

Streuung

Deckkraft: 10%

Innen

CSS

box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.10), 0px 4px 16px 0px rgba(0,0,0,0.10);

Vorschau

So funktioniert's

Voreinstellung wählen
Material-Elevation 1-16, Neumorphismus, Fokus-Ring, langer Schatten, Schein - ein Klick lädt die Ebenen.
Ebenen anpassen
X-/Y-Offset, Weichzeichnen, Streuung als Slider + Hex-Picker mit separater Deckkraft. Zahlen aktualisieren beim Ziehen.
Umsortieren oder stummschalten
Pfeiltasten ändern die Zeichenreihenfolge (erste = oben). Das Auge-Symbol schaltet eine Ebene stumm, ohne Werte zu verlieren.
Auf beiden Flächen prüfen
Heller/dunkler Hintergrund und Form abgerundet/Pille/Kreis - Schattendesign hängt vom Hintergrund ab.
CSS kopieren
Die vollständige `box-shadow:`-Deklaration steht bereit zum Einfügen in dein Stylesheet.

Was ist das?

Ein CSS-Box-Shadow-Generator baut die `box-shadow:`-Deklaration aus einer Liste von Schattenebenen. Vollständige Syntax pro Ebene: `[inset?] <x-offset> <y-offset> <weichzeichnen> <streuung> <farbe>`, mehrere Ebenen mit Komma getrennt. Browser zeichnen sie von vorne nach hinten in Deklarationsreihenfolge - die erste Ebene liegt oben. Negative Offsets schieben den Schatten nach oben/links, positive nach unten/rechts (Bildschirm-Koordinatenkonvention).

Wann verwenden

Karten-Elevations-Systeme (Material, iOS, eigene Design-Systeme), Fokus-Ringe für Barrierefreiheit, neumorphe Formen, hervorgehobene Eingabefelder, Drop-Shadows auf Icons in Karten, Hover-/Press-Feedback, Popovers und Tooltips, Modals. Überall wo man früher zu Photoshop griff, schafft CSS box-shadow es nativ, animiert sauber und respektiert Transparenz.

Häufige Fehler

Vollständig opake Schatten - wirken wie grobe Konturen. Streuung grösser als Weichzeichnen - harter Ring statt weicher Verlauf. Vergessen, dass Inset-Schatten in der Padding-Box gezeichnet werden, nicht über dem Rahmen. Werte wählen, die auf Weiss perfekt sitzen, im Dark Mode aber brechen (die dunkle Vorschau hier verhindert das). Und box-shadow auf inline-Element ohne Display-Änderung anwenden - nichts passiert.

FAQ

Warum mehrere Schattenebenen?: Echte Schatten sind nie ein einzelner weicher Klecks. Das Material-Elevation-System stapelt 2-3 Schatten: einen engen, dunklen, wenig gestreuten nahe der Kante plus einen breiteren, helleren weiter aussen. Die erste Ebene wird oben gezeichnet, die letzte unten - mit den Pfeiltasten umordnen.
Was macht inset?: Ein Inset-Schatten wird innerhalb der Padding-Box des Elements gezeichnet statt aussen. So entstehen gedrückte Buttons, eingelassene Eingabefelder oder Inner-Shadow-Effekte. Inset-Schatten liegen über dem Hintergrund, aber unter dem Inhalt, und drücken den Rahmen nicht hinaus.
Wie baue ich einen neumorphen Schatten?: Neumorphismus nutzt zwei gegensätzliche Schatten auf einer leicht getönten Fläche: einen dunklen unten rechts (`8px 8px 16px rgba(0,0,0,0.10)`) und ein helles Highlight oben links (`-8px -8px 16px rgba(255,255,255,0.85)`). Die Neumorphismus-Voreinstellung lädt diesen Stapel zum Anpassen. Der Effekt braucht eine leicht graue oder gefärbte Fläche - auf reinem Weiss verschwindet das Highlight.
Warum erscheint mein box-shadow nicht?: Drei übliche Verdächtige. (1) Ein Elternelement hat `overflow: hidden` und schneidet den Schatten ab. (2) Das Element ist inline - box-shadow braucht block, inline-block oder Flex-Item zum Rendern. (3) Das Element hat keinen Hintergrund, also bleibt ein Inset-Schatten unsichtbar, weil nichts zum Bemalen da ist.
Unterschied zwischen Weichzeichnen und Streuung?: Weichzeichnen weicht die Schattenkante auf - mehr Weichzeichnen = breiterer Verlauf. Streuung vergrössert oder verkleinert den Schatten vor dem Weichzeichnen - positive Werte machen ihn grösser als das Element, negative kleiner (nützlich für Schatten, die das Element 'anheben', indem sie schmaler bleiben).
box-shadow oder filter: drop-shadow?: `box-shadow` für rechteckige Boxen - günstiger zu rendern und unterstützt Multi-Layer + Inset. `filter: drop-shadow()` für nicht-rechteckige Formen wie PNGs mit Transparenz oder SVG-Icons, weil es dem Alphakanal statt der Bounding-Box folgt. Sie sind nicht austauschbar, wenn die Form kein Rechteck ist.
Wie viele Schattenebenen sind zu viel?: Ab 4-5 Ebenen wächst die sichtbare Tiefe nicht mehr und die Komposit-Kosten steigen. Materials Elevation deckelt aus diesem Grund bei 3 Ebenen pro Stufe. Wer mehr stapelt, kämpft wahrscheinlich gegen sich selbst - lieber die Streuung einer Ebene verdoppeln.