Box Shadow-Generator

CSS box-shadow ist eine CSS-Eigenschaft, die Schatten um HTML-Elemente erzeugt. Sie definiert horizontalen und vertikalen Versatz, Weichzeichnung, Ausdehnung, Farbe und optional den Inset-Modus. Mehrere Schatten können durch Komma getrennt kombiniert werden.

Passen Sie die Schatten-Parameter mit den Schiebereglern an und sehen Sie die Änderungen sofort in der Live-Vorschau. Sie können bis zu 5 Schatten-Ebenen hinzufügen, Presets laden und den fertigen CSS-Code mit einem Klick kopieren.

Ja, Sie können bis zu 5 Schatten-Ebenen hinzufügen und einzeln konfigurieren. Die Schatten werden in der Reihenfolge kombiniert, in der sie definiert sind – der erste Schatten liegt visuell am weitesten vorne.

Das Schlüsselwort "inset" erzeugt einen inneren Schatten statt eines äußeren. Der Schatten wird innerhalb der Box gerendert und erweckt den Eindruck, als sei das Element eingedrückt oder vertieft – ideal für Neumorphism-Effekte.

Der Spread-Radius vergrößert (positiver Wert) oder verkleinert (negativer Wert) den Schatten relativ zur Elementgröße. Ein Spread von 0 bedeutet, dass der Schatten genauso groß ist wie das Element. Positive Werte erzeugen einen breiteren Schatten, negative einen schmaleren.

Neumorphism (Soft UI) wird durch zwei Schatten erzeugt: einen hellen Schatten oben links und einen dunklen Schatten unten rechts, beide auf einem hellen Hintergrund. Verwenden Sie die Presets "Neumorphism soft" oder "Neumorphism pressed" als Ausgangspunkt und passen Sie die Werte an.

CSS box-shadow wird von allen modernen Browsern unterstützt, darunter Chrome, Firefox, Safari, Edge und Opera. Auch mobile Browser unterstützen die Eigenschaft vollständig. Ein -webkit-Prefix ist nur noch für sehr alte Safari-Versionen relevant.

Nein. Alle Einstellungen werden nur für die aktuelle Sitzung im Browser gespeichert. Beim Verlassen der Seite gehen die Werte verloren. Kopieren Sie den CSS-Code, bevor Sie die Seite schließen.

Ja, der Generator bietet den CSS-Code auch im Tailwind-Format als Arbitrary Value an, z.B. shadow-[0_5px_15px_rgba(0,0,0,0.2)]. Wechseln Sie dazu auf den Tab "Tailwind" in der Code-Ausgabe.

Vermeiden Sie sehr große Blur-Werte (über 50px) auf vielen Elementen gleichzeitig, da diese das Rendering verlangsamen können. Verwenden Sie will-change: box-shadow bei animierten Schatten und reduzieren Sie die Anzahl der Schatten-Ebenen auf das Nötige.