Neumorphism-Generator
Erstellen Sie den Soft-UI-Extrusionslook: duale helle & dunkle Schatten, 4 Form-Modi und volle Kontrolle über Licht, Tiefe und Weichheit.
Tipp: Neumorphism erfordert, dass der Elementhintergrund dem Seitenhintergrund entspricht — der Generator setzt beide für Sie.
So verwenden Sie den Neumorphism-Generator
- Wählen Sie eine Grundfarbe — Soft UI funktioniert am besten mit hellen, leicht gedämpften Farben.
- Wählen Sie die Richtung der Lichtquelle; die Schatten fallen auf die gegenüberliegende Seite.
- Justieren Sie Distanz und Blur für die Tiefe und Intensität für den Kontrast zwischen hellem und dunklem Schatten.
- Wechseln Sie zwischen den Formen Flach, Konkav, Konvex und Gedrückt für Buttons, Cards und Inputs.
- Kopieren Sie das CSS (background + box-shadow-Paar) oder die Tailwind-Klasse in Ihr Projekt.
Über diesen Neumorphism-Generator
Neumorphism (Soft UI) lässt Elemente aus dem Hintergrund extrudiert wirken, indem zwei Schatten kombiniert werden: ein dunkler Schatten auf der einen Seite und ein heller Glanz auf der anderen, wobei das Element mit derselben Farbe wie der Seitenhintergrund gefüllt ist. Das Ergebnis ist ein weicher, taktiler, fast physischer Interface-Stil für Cards, Buttons und Toggles.
Dieser Generator berechnet die hellen und dunklen Schattenfarben automatisch aus Ihrer Grundfarbe und paart sie mit vier Form-Modi: flach (klassische Extrusion), konkav und konvex (Verlaufsfüllungen für gewölbte Oberflächen) und gedrückt (Inset-Schatten für hineingedrückte Zustände). Denken Sie daran: Der Elementhintergrund muss dem Seitenhintergrund entsprechen, damit die Illusion funktioniert — die Vorschau zeigt beide zusammen.
Neumorphism FAQ
Warum funktioniert Neumorphism auf meiner Seite nicht?
Der Stil hängt davon ab, dass das Element mit seinem Hintergrund verschmilzt: Das Element muss dieselbe (oder eine sehr ähnliche) Hintergrundfarbe verwenden wie die Fläche dahinter. Wenn Ihr Seitenhintergrund von der gewählten Grundfarbe abweicht, aktualisieren Sie eine der beiden — genau deshalb malt der Generator die Vorschaufläche mit derselben Farbe.
Welche Farben eignen sich am besten für Soft UI?
Helle, leicht entsättigte Farben (ca. 85–95 % Helligkeit) funktionieren am besten, da sowohl der hellere Glanz als auch der dunklere Schatten sichtbar bleiben. Reines Weiß tötet den Glanz; reines Schwarz tötet den Schatten. Der Intensitäts-Regler steuert, wie weit sich die beiden Töne von der Grundfarbe entfernen.
Was ist der Unterschied zwischen konkav und konvex?
Beide fügen eine subtile lineare Verlaufsfüllung über den dualen Schatten hinzu. Konvex wölbt sich zum Betrachter (heller zur Lichtquelle hin), wie ein erhöhter Button. Konkav wölbt sich nach innen, wie eine flache Schale — nützlich für Mulden und Eingabefelder. Gedrückt verwendet stattdessen Inset-Schatten, für einen aktiven/hineingedrückten Zustand.
Ist Neumorphism barrierefrei?
Soft UI ist von Natur aus kontrastarm, verwenden Sie es daher für dekorative Container statt für kritische Steuerelemente. Stellen Sie sicher, dass Text und Icons die WCAG-Kontrastverhältnisse erfüllen, und erwägen Sie eine Fokus-Kontur für interaktive Elemente.
Wie werden die hellen und dunklen Schattenfarben berechnet?
Der Generator hellt die Grundfarbe für den Glanz Richtung Weiß auf und dunkelt sie für den Schatten Richtung Schwarz ab, skaliert durch den Intensitäts-Regler. So bleiben beide Töne in derselben Farbtonfamilie — das macht den Effekt weich und natürlich.