OmniKit.tech Logo OmniKit.tech
DE
box-shadow-generator

CSS Box-Shadow Generator

Visueller CSS-Box-Shadow-Generator: Mehrschichtige Schatten, Weichzeichner, Ausbreitung, Live-Vorschau und CSS/Tailwind-Export.

Voreinstellungen

Schatten-Ebenen

Versatz X 0px
Versatz Y 4px
Weichzeichner 6px
Ausbreitung -1px
Schattenfarbe
#000000
Deckkraft 10%

Live-Vorschau

Block
Leinwand-Hintergrund
Box-Farbe
Radius 16px
CSS-Code
Tailwind-CSS-Klasse

So funktioniert es

1 Schattenparameter anpassen

Passen Sie horizontale und vertikale Versätze (X/Y), Weichzeichnungsradius, Ausbreitung, Farbe und Deckkraft mit Schiebereglern an.

2 Mehrere Ebenen hinzufügen & Presets wählen

Stapeln Sie mehrere Schatten für realistische Tiefe mit «+ Ebene hinzufügen» oder wählen Sie Presets wie Soft, Float, Glow oder Inset.

3 CSS-Code oder Tailwind-Klasse kopieren

Sehen Sie Ihren Schatten in Echtzeit auf anpassbaren Hintergründen und kopieren Sie den fertigen CSS-Code oder Tailwind-Klassen mit einem Klick.

Häufig gestellte Fragen (FAQ)

Warum mehrschichtige Schatten statt eines einzelnen Schattens?
In der Natur erzeugt Licht sanfte Umgebungsstreuung kombiniert mit schärferen Kontaktkanten. Das Kombinieren mehrerer Schichten erzeugt eine Tiefe, die ein einzelner CSS-Schatten nicht abbilden kann.
Wie verwende ich den erzeugten Schatten in Tailwind CSS?
Das Tool erzeugt automatisch eine Tailwind-Klasse mit individuellem Wert, z. B. class="shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.1)]". Fügen Sie diese einfach in das class-Attribut Ihres HTML-Elements ein.
Werden innere Schatten (inset) unterstützt?
Ja, Sie können das Kontrollkästchen Inset für jede Ebene aktivieren. Sie können auch äußere und innere Schatten auf demselben Element kombinieren.

Ähnliche Werkzeuge