Neumorphismus-CSS-Schatten – Zweischichtiger Code
Erstellen Sie visuell CSS-Box-Shadow-Code: Schieberegler für Versatz, Unschärfe, Ausbreitung, Farbe mit Deckkraft, Einfügungsmodus und bis zu vier Ebenen mit Live-Vorschau.
Ergebnis
Auf dieser Seite wird der Generator mit dem bereits erstellten klassischen neumorphen Paar geöffnet: eine helle Schicht mit einem Offset von −8 Pixel/−8 Pixel in nahezu Weiß und eine dunkle Schicht mit einem Offset von 8 Pixel/8 Pixel in einem gedämpften Graublau, beide unscharf mit 16 Pixel. Wechseln Sie zwischen den beiden Ebenen in der Ebenenliste, um jede Seite unabhängig abzustimmen.
Neumorphismus (Soft UI) ist der geprägte Stil, der um 2020 seinen Höhepunkt erreichte: Elemente sehen aus, als würden sie aus dem Hintergrund extrudiert, anstatt darüber zu schweben. Ehrlich gesagt geht das mit echten Kompromissen einher – der Effekt funktioniert nur, wenn der Hintergrund des Elements mit dem Seitenhintergrund übereinstimmt, und die kontrastarmen Kanten können die Zugänglichkeit beeinträchtigen – daher verwenden die meisten Teams ihn jetzt als Akzent und nicht als ganze Designsprache.
Wenn der Stil zu Ihrem Projekt passt, ist diese zweischichtige Deklaration der kanonische Ausgangspunkt: Kopieren Sie das CSS, stellen Sie das Element und den Seitenhintergrund auf dasselbe weiche Grau ein und fügen Sie einen passenden Rahmenradius hinzu. Alles läuft lokal in Ihrem Browser.