Box-Shadow-Generator
Stapeln Sie mehrere Schatten, justieren Sie jeden mit x/y/Weichzeichnen/Ausbreitung/Farbe/Deckkraft/Inset und sehen Sie die Vorschau auf Karte, Schaltfläche, Kreis oder Eingabefeld. 13 produktionsreife Vorlagen inklusive Material-Stufen, Neumorphism, Neon-Glow und Long-Shadow. Ausgabe als reines CSS oder Tailwind-Klasse mit beliebigem Wert.
Everything runs in your browser. Nothing is uploaded.
So verwenden Sie diesen box-shadow-generator
- Wählen Sie eine Startvorlage oder klicken Sie auf '+ Ebene hinzufügen', um von Grund auf zu bauen.
- Justieren Sie x, y, Weichzeichnen, Ausbreitung, Farbe, Deckkraft und Inset pro Ebene.
- Ordnen Sie Ebenen mit den ↑↓-Schaltflächen um (oben ist am nächsten zum Element).
- Wechseln Sie die Vorschauform (Karte / Schaltfläche / Kreis / Eingabefeld) und passen Sie Hintergrund- und Element-Farbe an.
- Kopieren Sie das CSS oder die Tailwind-Klasse mit beliebigem Wert.
Häufig gestellte Fragen
Was ist der Unterschied zwischen Weichzeichnen und Ausbreitung?
Weichzeichnen mildert die Kante des Schattens — höher = weicher Schatten. Ausbreitung vergrößert oder verkleinert den Schatten vor dem Weichzeichnen — positiv vergrößert, negativ verkleinert.
Was ist Inset?
Inset-Schatten werden innerhalb des Elements gezeichnet statt außerhalb, sodass das Element eingedrückt oder vertieft wirkt.
Warum mehrere Schatten stapeln?
Echte Schatten sind geschichtet — ein scharfer Schatten nahe am Element plus ein weicher Schatten weiter weg wirkt natürlicher. Material Design verwendet 2-3 Ebenen.
Funktioniert die Tailwind-Klasse in jedem Projekt?
Sie nutzt Tailwinds Syntax für beliebige Werte (`shadow-[...]`), die Tailwind v3+ mit JIT/beliebigen Werten erfordert.