Entwickler·Aktualisiert 2026-04-22

CSS Box-Shadow Generator

Mehrschichtige Schatten bauen mit Live-Vorschau. Inset-Schatten unterstützt.

So funktioniert es

1.
Ebenen anlegen
Kombiniere bis zu 5 Schatten-Layer. Mehrere Layer erzeugen realistische Tiefe (ambient + direct + contact). Jeder Layer kann inset (innen) oder outset (außen) sein.
2.
Werte anpassen
Stelle X-Offset, Y-Offset, Blur-Radius, Spread und Farbe pro Layer ein. Die Vorschau aktualisiert sich live. Negativer Spread lässt den Schatten schrumpfen.
3.
CSS kopieren
Kopiere die fertige box-shadow-Eigenschaft. Direkt einsatzbereit in CSS, styled-components oder Tailwind arbitrary-values ([box-shadow:...]).

Wie baue ich einen Material-Design-Schatten?+

Kombinieren Sie zwei Ebenen: eine scharfe (geringe Unschärfe, wenig Offset) und eine weiche (große Unschärfe, mittlerer Offset).

Warum wirkt mein Schatten zu stark?+

Reduzieren Sie die Alpha-Kanäle (0.1 bis 0.2). Echte Schatten sind subtil.

Unterstützt das Tool farbige Schatten?+

Ja, beliebige rgba-, hsla- oder Hex-Farben.