Neumorphismus-Generator
Soft-UI-Oberflächen aus einer Farbe – heller und dunkler Schatten, vier Formen, einstellbare Tiefe und Lichtrichtung.
So funktioniert der Neumorphismus-Generator
Erzeuge Soft-UI-CSS aus einer einzigen Flächenfarbe – Schatten, Verläufe und Radius – mit Live-Vorschau.
Nur eine Farbe nötig
Wähle die Flächenfarbe, und das Tool leitet beide Schatten ab – einen dunkleren und einen helleren Ton –, sodass das Element wie aus seinem Hintergrund herausgeformt wirkt.
Vier Formen
„Flach“ liegt bündig mit der Fläche, „Konvex“ wölbt sich nach außen, „Konkav“ nach innen (beide über einen dezenten Verlauf), und „Gedrückt“ nutzt Innenschatten für eine eingeprägte Vertiefung.
Lichtrichtung
Wähle, aus welcher Ecke das Licht kommt – heller und dunkler Schatten tauschen entsprechend die Seiten, passend zum Rest deines Interfaces.
Tiefe einstellen
Abstand, Intensität und Unschärfe bestimmen, wie weit sich das Element scheinbar abhebt. Die Unschärfe folgt dem Abstand automatisch in einem natürlichen Verhältnis, und du kannst sie danach feinjustieren.
Häufig gestellte Fragen
Ein Soft-UI-Stil, bei dem Elemente die Hintergrundfarbe teilen und allein durch ein Paar aus hellem und dunklem Schatten erhaben oder eingedrückt wirken – ohne Rahmen und ohne kontrastreiche Füllungen.
Die Illusion funktioniert, weil Element und Seite eine gemeinsame Fläche bilden. Unterscheiden sich die Farben, wirkt das Element wie eine gewöhnliche Karte mit Schatten statt wie eine Ausformung der Fläche.
Der geringe Kontrast ist der Hauptkritikpunkt. Nutze den Stil für dekorative Flächen und große Bedienelemente, halte den Textkontrast WCAG-konform und ergänze klare Fokuszustände – verlass dich nicht allein auf die Schatten, um Interaktivität zu signalisieren.
Sie legen einen dezenten diagonalen Verlauf über dieselben Schatten: Konvex verläuft von hell nach dunkel (gewölbt), konkav von dunkel nach hell (vertieft). „Gedrückt“ kehrt die Schatten mit inset nach innen.