Neumorphismus-Generator

Den Neumorphismus-Generator verwenden

1. Die Oberflächenfarbe wählen - beginne im sanft-neutralen Bereich (#e0e5ec, #f0f0f3, #2a2d3a für den Dunkelmodus). Dieselbe Farbe wird für das Element, die Seite und die Mathematik verwendet, die beide Schattentöne ableitet.
2. Den Größen-Schieberegler setzen - das ist der gemeinsame Schattenversatz und Unscharf-Radius. Ein größerer Wert erzeugt eine weichere, dramatischere Extrusion.
3. Intensität anpassen, um zu ändern, wie weit die zwei Schattenfarben von der Oberflächen-Helligkeit entfernt sind. Niedrige Intensität ist subtil, hohe Intensität ist cartoonartig.
4. Die Form wählen: Flach hält die Oberfläche gleichmäßig, Konkav fügt einen subtilen nach innen gerichteten Farbverlauf hinzu, Konvex wölbt nach außen, Gepresst kippt die Schatten nach innen für eine eingesenkte Vertiefung.
5. Den Eckenradius setzen und das generierte CSS kopieren.

Was der Generator im Hintergrund ausgibt

Eine neumorphe Oberfläche besteht aus genau zwei Dingen: einem Hintergrund, der seinem Elternteil entspricht, und einem box-shadow-Paar mit gegenlaufigen Versätzen. Das Tool berechnet die hellen und dunklen Schattenfarben, indem es die Oberflächen-HSL-Helligkeit um den Intensitätsbetrag nach oben und unten verschiebt (implementiert durch das relative CSS Color Level 4-Parsing, das der Designer manuell als zwei color-mix(in srgb, ...)-Ausdrücke schreiben würde). Die Ausgabe ist daher ein Element, ein Hintergrund und eine box-shadow-Regel der Form {size}px {size}px {size*2}px darkShade, -{size}px -{size}px {size*2}px lightShade. Für die Gepresst-Variante tauscht der Generator die Reihenfolge und fügt beiden Schatten das Präfix inset hinzu, sodass das Licht das Innere unten rechts statt die Außenseite oben links trifft. Kein Filter-Pass, keine Pseudo-Elemente - alles ist eine einzige Deklaration, die der Browser als Teil seiner eigenen Paint-Layer des Elements rastert.

Wann Neumorphismus tatsächlich hilft

• Mediensteuerungsflachen, wo Schaltflächen physisch wirken müssen (Lautstärkeregler, Wiedergabe-Pads, Thermostat-Zifferblätter).
• Ruhige, niedrig-dichte Dashboards, wo ein einzelnes Farbfeld mit sanfter Tiefe ein Gitter hochkontrastiger Karten übertrifft.
• Beruhrungs-zuerst-Tablet-UIs, wo die großen Touch-Targets von einem taktilen und drückbaren Erscheinungsbild profitieren.
• Prototypen von Hardware-Companion-Apps (Smart-Locks, Geräte), wo die Software das Gerätegehäusematerial widerspiegeln soll.
• Dekorative nicht-interaktive Flächen: Karten-Rahmen, Abschnittstrenner, Bild-Mounts.

Das Barrierefreiheitsproblem, das du nicht ignorieren kannst

Neumorphismus scheitert stark am Kontrast. WCAG 2.1 SC 1.4.11 (Nicht-Text-Kontrast) fordert, dass UI-Komponenten ein 3:1-Verhältnis gegenüber benachbarten Farben einhalten, und eine neumorphe Schaltfläche hat konstruktionsbedingt dieselbe Farbe wie ihr Hintergrund plus zwei kontrastarme Schatten. Auf einer #e0e5ec-Oberfläche ist der helle Schatten ungefähr #ffffff und der dunkle Schatten ungefähr #a3b1c6 - das Verhältnis der Schaltflächen-Füllung zur umgebenden Oberfläche beträgt 1,00:1, was ein automatisches Scheitern ist. Das bedeutet, dass Screenreader-Nutzer in Ordnung sind, aber sehschwache Nutzer, Nutzer mit hellem Umgebungslicht und Nutzer mit billigen LCD-Bildschirmen die Schaltflächenkanten einfach nicht sehen können. Die üblichen Abhilfen sind: Den Stil nur für Dekoration reservieren, jede interaktive Oberfläche mit einem sekundären Hinweis versehen (ein getöntes Icon, ein farbiger Fokusring oder ein 1px-Rahmen) oder den Stil zugunsten eines flachen Systems, das das Verhältnis besteht, komplett fallen lassen. Andere Randfälle sind: Schatten, die abgeschnitten werden, wenn sich das Element nahe einer Containerkante befindet, Schatten, die innerhalb eines overflow: hidden-Elternelements verschwinden, und Safaris leicht andere Unscharf-Abnahme, die sichtbar unterschiedliche Schattenweichheit als Chrome ergibt.

Warum "Soft-UI"-Schatten nur box-shadow sind

Das CSS Backgrounds and Borders Module Level 3 spezifiziert box-shadow als eine geordnete Liste von Schatten, jeder bestehend aus horizontalem Versatz, vertikalem Versatz, Unscharf-Radius, Spread, Farbe und einem optionalen inset-Schlüsselwort. Neumorphismus sind einfach zwei Schatten in dieser Liste, wobei der zweite Schatten das räumliche Spiegelbild des ersten ist und die Farben ein symmetrisches Paar um die Oberflächen-Helligkeit des Elements in HSL sind (oder genauer in OKLCH, wenn du auf beiden Seiten perzeptuell gleiche Dunkelheit möchtest - laut Bjorn Ottosson's A perceptual color space for image processing von 2020 sehen HSL-Spiegel bei gesättigten Farbtönen ungleichmäßig aus, weil HSL-Helligkeit nicht perzeptuell gleichmäßig ist). Der Grund, warum der Stil uberhaupt funktioniert, ist die Annahme des menschlichen visuellen Systems einer Lichtquelle von oben: Wir lesen die Hervorhebung oben links und den Schatten unten rechts als Beweis dafür, dass die Oberfläche sich zu uns hin wölbt. Das Paar umkehren und das Gehirn liest es als Delle - genau so wird die Gepresst-Variante gemacht.

Vergleich mit den Alternativen

Material Design 3 verwendet Elevations-Tokens (--md-sys-elevation-1 bis -5), die ähnliche Tiefe mit viel besserem Kontrast erzeugen, weil sie neben den Schatten einen subtilen Ton-Lift hinzufügen. Apples Human Interface Guidelines seit Big Sur verwenden "Vibranzmaterialien" (Backdrop-Filter auf einer gruppierten Oberflächenfarbe), die Tiefe ohne Kontrast-Kosten geben. Skeuomorphismus, der ältere 2007-2013-iOS-Look, verwendete echte Farbverläufe und innere Hervorhebungen und zahlte teuer in visuellem Lärm. Neumorphismus sitzt in einer engen Nische zwischen diesen dreien: ruhiger als Skeuomorphismus, strukturierter als Material, weniger datenschwer als Vibranzmaterialien. Verwende es, wenn das Produkt absichtlich ruhig ist und die Barrierefreiheitsprüfung Raum für kreative Abmilderung hat; greife auf Material oder Flat, wenn Lesbarkeit die wichtigste Kennzahl ist.