Neumorphism-Generator

Soft-UI-Schatten erzeugen

Neumorphism erzeugt Tiefe, indem ein Element auf eine Oberfläche mit derselben Grundfarbe gesetzt und mit zwei gegenläufigen Schatten versehen wird: einem hellen und einem dunklen. Dadurch wirken Bedienelemente sanft aus der Seite herausgehoben oder in sie hineingedrückt. Mit diesem Neumorphism-Generator stellen Sie die wichtigsten Variablen ein: Hintergrundfarbe, Schattenabstand, Unschärfe, Intensität, Eckenradius und Oberflächenform. Die Vorschau aktualisiert sich sofort, sodass Sie sehen, wie kleine Änderungen die Illusion des weichen Lichts beeinflussen.

Das erzeugte CSS enthält einen Hintergrund, einen Eckenradius und eine doppelte box-shadow. Der flache Modus hält die Oberflächenfarbe einheitlich, während der konkave und der konvexe Modus einen dezenten Verlauf hinzufügen, der eine Vertiefung oder eine abgerundete Erhebung andeutet. Da neumorphe Effekte stark von der Seitenfarbe abhängen, sollten Sie sowohl den Hintergrund der Bühne als auch die Komponentenstile kopieren, wenn Sie die Vorschau in einem anderen Projekt exakt nachbilden möchten.

Abstand, Unschärfe und Intensität wählen

Der Abstand legt fest, wie weit sich der helle und der dunkle Schatten vom Element entfernen. Größere Abstände lassen eine Komponente stärker abgehoben wirken, können aber unrealistisch aussehen, wenn die Unschärfe zu gering ist. Die Unschärfe macht den Schattenrand weich, was für den glatten Soft-UI-Look entscheidend ist. Die Intensität steuert die Deckkraft: Niedrige Werte wirken dezent und ruhig, hohe Werte erzeugen einen kräftigeren Prägeeffekt. Ein ausgewogenes Design nutzt meist eine mittlere Unschärfe, einen moderaten Abstand und genug Intensität, um die Form sichtbar zu machen, ohne benachbarte Inhalte zu überdecken.

Barrierefreiheit und Einsatz in echten Oberflächen

Neumorphism funktioniert am besten bei dekorativen Karten, Schaltern, Dashboards und Icon-Buttons, die zusätzlich klar beschriftet sind. Verlassen Sie sich nicht allein auf Schatten, um Zustände zu vermitteln, denn erhabene Flächen mit geringem Kontrast sind für viele Nutzer schwer wahrnehmbar. Ergänzen Sie sichtbare Fokusrahmen, aktive Zustände und einen Textkontrast, der die Anforderungen der Barrierefreiheit erfüllt. Testen Sie das kopierte CSS anschließend auf dem tatsächlichen Seitenhintergrund und in der tatsächlichen Komponentengröße. Ein weicher Schatten, der isoliert elegant aussieht, braucht in einer dichten Oberfläche unter Umständen mehr Kontrast oder einen schlichteren Radius.