Box-Shadow-Generator
Stapeln Sie bis zu 6 Schattenebenen, justieren Sie jede unabhängig und kopieren Sie sauberen CSS- oder Tailwind-Code mit einem Klick.
So verwenden Sie den Box-Shadow-Generator
- Klicken Sie auf „Ebene hinzufügen“, um bis zu 6 Schatten zu stapeln — wählen Sie eine Ebene in der Liste zum Bearbeiten aus.
- Passen Sie Offset X/Y an, um den Schatten zu bewegen, dann Blur für Weichheit und Spread für die Größe.
- Wählen Sie Schattenfarbe und Deckkraft; aktivieren Sie „Innerer Schatten“ für Innentiefen-Effekte.
- Gestalten Sie die Demo-Box (Farbe, Hintergrund, Eckenradius) passend zu Ihrer echten Komponente.
- Kopieren Sie das Ergebnis aus dem CSS-Tab oder wechseln Sie zum Tailwind-Tab für eine Utility-Klasse.
Über diesen Box-Shadow-Generator
Die CSS-Eigenschaft box-shadow akzeptiert eine kommagetrennte Liste von Schatten, jeder mit horizontalem und vertikalem Offset, Blur-Radius, Spread-Radius, Farbe und einem optionalen inset-Schlüsselwort. Mehrschichtige Schatten von Hand zu schreiben ist mühsam: Winzige Änderungen an einem Wert können das Ergebnis dramatisch verändern. Dieser Generator gibt jeder Ebene eigene Regler und zeigt den kombinierten Effekt in Echtzeit.
Nutzen Sie die Presets als Ausgangspunkte — von subtilen „Weichen“ Erhebungen über gestaffelte Material-Tiefe bis zu harten „Kanten“-Retro-Schatten und leuchtenden „Neon“-Effekten. Negative Spread-Werte eignen sich hervorragend für natürliche, fotorealistische Schatten. Das generierte CSS funktioniert in jedem modernen Browser, und die Tailwind-Ausgabe verwendet Arbitrary-Value-Syntax, kompatibel mit Tailwind CSS v3+.
Box-Shadow FAQ
Wie erstelle ich einen mehrschichtigen box-shadow?
Klicken Sie auf „Ebene hinzufügen“, um Schatten zu stapeln. Jede Ebene hat eigene Einstellungen für Offset, Blur, Spread, Farbe, Deckkraft und Inset. Die CSS-Ausgabe verbindet alle Ebenen automatisch mit Kommas, und Sie können Ebenen mit den Pfeiltasten umsortieren — die erste Ebene wird oben gerendert.
Was bewirkt der Spread-Wert in box-shadow?
Spread vergrößert (positiv) oder verkleinert (negativ) den Schatten vor dem Weichzeichnen. Positiver Spread macht den Schatten größer als das Element — nützlich für Rahmen und Neon-Leuchten. Negativer Spread zieht den Schatten nach innen, was zusammen mit großem Blur eine weiche, natürliche Tiefe erzeugt.
Wie mache ich einen inneren (inset) Schatten?
Aktivieren Sie den Schalter „Innerer Schatten“ auf einer beliebigen Ebene. Inset-Schatten werden innerhalb des Elements gerendert und erzeugen gedrückte oder geprägte Effekte. Sie können in einer einzigen box-shadow-Deklaration sogar Inset- und normale Ebenen mischen.
Ist die generierte Tailwind-Klasse gültig?
Ja. Die Tailwind-Ausgabe verwendet Arbitrary-Value-Syntax wie shadow-[0_8px_24px_-6px_rgba(30,27,75,0.35)], die von Tailwind CSS v3 und neuer (einschließlich der v4-Engine) ohne Konfiguration unterstützt wird.
Warum sieht mein Schatten auf meiner eigenen Seite anders aus?
Schatten werden von der Größe des Elements, dem border-radius und dem Hintergrund dahinter beeinflusst. Stimmen Sie Farbe der Demo-Box, Eckenradius und Hintergrund auf Ihre echte Komponente ab, um eine genaue Vorschau zu erhalten.