Neumorphism-Generator (Soft UI)
Neumorphism lässt Elemente mit zwei gegenläufigen Schatten – einem hellen und einem dunklen – aus dem Hintergrund herauswachsen. Passe jeden Parameter an, wähle die Lichtrichtung und kopiere das CSS.
Zu 100 % in deinem Browser verarbeitet
Ctrl + Enter ausführenCtrl + C Ergebnis kopieren
So funktioniert es
- 1Wähle die Grundfarbe: Hintergrund und Element haben dieselbe Farbe.
- 2Passe Größe, Radius, Abstand, Intensität und Unschärfe der Schatten an.
- 3Wähle die Form (flach, konkav, konvex oder gedrückt) und die Lichtrichtung.
- 4Kopiere das CSS oder teile einen Link zu deinem Design.
Anwendungsfälle
- Haptisch wirkende Buttons, Schalter und Bedienelemente.
- Karten und Panels für minimalistische Dashboards.
- Oberflächen für Smart Home, Musikplayer oder Taschenrechner.
- Designtrends für Mockups und Dribbble ausprobieren.
Häufig gestellte Fragen
Was ist Neumorphism?
Ein Designstil (Neumorphism oder Soft UI), bei dem Elemente aus demselben Material wie der Hintergrund geformt wirken. Er nutzt zwei gegenläufige box-shadows: einen helleren zur Lichtquelle und einen dunkleren auf der Gegenseite.
Was ist der Unterschied zwischen flach, konkav, konvex und gedrückt?
Flach nutzt eine Vollfarbe; konkav und konvex fügen einen Verlauf hinzu, der eine nach innen oder außen gewölbte Fläche simuliert; gedrückt verwendet Inset-Schatten, sodass das Element eingedrückt wirkt.
Ist Neumorphism barrierefrei?
Der geringe Kontrast kann die Grenzen von Buttons und Feldern schwer erkennbar machen. Kombiniere ihn mit klaren Icons, kontrastreichem Text und sichtbaren Fokuszuständen.
Funktioniert es auf dunklen Hintergründen?
Ja, aber reduziere die Intensität: Bei sehr dunklen Farben dominiert der helle Schatten. Am besten wirkt es mit mittleren Grautönen und Pastellfarben.