Design

CSS-Boxschatten-Generator

Box-Schatten visuell gestalten.

Hintergrund: CSS-Verlaufsgenerator · Layout: CSS-Flexbox-Generator.

Verwendung

Mit Voreinstellung oder einer Ebene starten, dann Ebenen für Tiefe hinzufügen. Für gepresste/neumorphe Effekte 'inset' umschalten. Den kommagetrennten Wert in box-shadow kopieren.

FAQ

Kann ich mehrere Schatten stapeln?

Ja – füge Ebenen hinzu, um einen weichen Umgebungsschatten mit einem scharfen Kontaktschatten zu kombinieren oder farbiges Leuchten zu stapeln. Jede Ebene hat eigenen Versatz, Unschärfe, Ausbreitung, Farbe und einen inset-Schalter.

Was bewirken die Voreinstellungen?

Startpunkte mit einem Klick: Karten-Elevation im Stripe-Stil, angehobener oder eingedrückter Neumorphismus, Material-Tiefe und sanftes Leuchten – passe die Regler nach dem Anwenden an.

Wie verwende ich die Ausgabe?

Kopiere die box-shadow-Zeile in dein CSS. Mehrere Ebenen werden genau wie von Browsern erwartet durch Kommas getrennt.

Zuletzt aktualisiert: