CSS Box-Shadow

Ebenen stapeln. Jede einzeln justieren. Produktionsreifes CSS kopieren.

PREVIEW

Was ist dieser CSS-box-shadow-Generator?

Dieser kostenlose CSS-box-shadow-Generator lässt dich beliebig viele Schattenlayer visuell stapeln, Offset, Blur, Spread, Farbe und Deckkraft pro Layer tunen und dann produktionsreifes CSS kopieren — alles läuft in deinem Browser.

Wie erstelle ich einen layered box-shadow in CSS?

Füge für jeden Schatten einen Layer hinzu, setze Offset, Blur, Spread und Farbe, und trenne sie dann durch Kommas. Der Generator handhabt Reihenfolge und rgba-Konvertierung, sodass du CSS kopieren kannst, das direkt in dein Stylesheet passt.

Wichtige Funktionen

Unbegrenzte layered Schatten
Stapele so viele Schattenlayer wie du brauchst; reordere, dupliziere oder lösche jeden einzelnen unabhängig.
Inset und Outset
Schalte jeden Layer zwischen Drop-Shadow und Inset um, für innere Glühen und gedrückte Effekte.
Kuratierte Vorlagen
Subtle, Soft, Medium, Hard, Neumorphism, Glow und Glassmorphism — ein Klick zum Laden, dann nach Geschmack tunen.
Als CSS oder Tailwind kopieren
Hol dir die kanonische box-shadow-Deklaration oder eine Tailwind-Arbitrary-Value-Klasse zur direkten Nutzung.

So funktioniert es

Beginne mit dem standardmäßigen Soft-Shadow, dann tune die Offset-, Blur-, Spread- und Farb-Slider nach Geschmack. Füge weitere Layer für reichhaltigere Tiefe hinzu — Ambient + Key Shadow ist ein klassisches Zwei-Layer-Muster. Wechsle den Stage-Hintergrund, um den Kontrast auf dunklen und hellen Oberflächen zu prüfen. Drücke Copy CSS, wenn du zufrieden bist.

Häufig gestellte Fragen

Wie stapele ich mehrere box-shadows in CSS?

Trenne sie durch Kommas innerhalb einer einzelnen box-shadow-Deklaration. Der erste Schatten malt über den Rest, was wichtig ist, wenn du einen engen Ambient-Shadow mit einem breiteren diffusen mischst.

Was ist der Unterschied zwischen Blur und Spread?

Blur weicht die Kanten des Schattens auf, während Spread den Schatten selbst vor dem Blurren erweitert oder zusammenzieht. Verwende Blur für Ambience und Spread für enge Rim-Highlights.

Kann ich damit Neumorphism oder Glassmorphism erstellen?

Ja. Die Neumorphism-Vorlage stapelt einen dunklen und einen hellen Schatten auf gegenüberliegenden Seiten; die Glass-Vorlage kombiniert einen äußeren Drop-Shadow mit einem Inset-Highlight, um Mattglas zu imitieren.

Vom Tooljar-Team gemäß der W3C-Spezifikation CSS Backgrounds and Borders Module Level 3 entwickelt — jeder Layer wird live in derselben Kurzschreibweise gerendert, die der Browser parst, sodass die Vorschau genau das ist, was Produktions-CSS malen wird.