So stellen Sie eine neumorphe weiche Benutzeroberfläche in CSS her: Schatten, Formen und das Kontrastproblem

Neumorphismus ist der Look, bei dem ein Knopf oder eine Karte aus der Seite selbst herausgedrückt zu sein scheint, wie eine Form, die aus weichem Kunststoff geformt ist Es gibt keinen Rand, keine Füllfarbe, die sich vom Hintergrund unterscheidet, nur ein blasses Highlight auf der einen Seite und einen weichen Schatten auf der anderen Seite Es fotografiert wunderschön in Design-Mockups In einer echten Oberfläche kann man auf zwei Arten leicht falsch liegen: Der Effekt verschwindet, oder die Bedienelemente werden schwer zu erkennen.

Beide Probleme laufen auf eine kleine Menge Arithmetik über Farben und Schatten hinaus Dieser Leitfaden erklärt, wie der Soft-UI-Effekt aus zwei aufgebaut wird box-shadow Schichten, wie die hellen und dunklen Farbtöne von einer Oberflächenfarbe abgeleitet werden, was die flachen, konkaven, konvexen und gepressten Formen verändern und wie man eine neumorphe Grenzfläche unter den WCAG-Kontrastregeln nutzbar hält Die CSS-Neumorphismus-Generator Produziert den gesamten untenstehenden Code mit einer Live-Vorschau.

tl; dr: Ein neumorphisches Element hat die gleiche Hintergrundfarbe wie die Seite und zwei Kastenschatten: einen dunkleren nach unten und rechts versetzt, und einen helleren nach oben und links versetzt, wobei das Element durch die Verwendung des eingefügten Schlüsselworts auf beiden gedrückt aussieht Der CSS Neumorphism Generator leitet beide Schattenfarben von Ihrer Oberflächenfarbe ab, mit Schiebern für Abstand (2 bis 50 px), Unschärfe (0 bis 100 px), Intensität (2 bis 40%) und Radius (0 bis 80 px), dazu flache, konkave, konvexe und gedrückte Formen. Die Standardlichtfläche gibt box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff. Diese Schatten erreichen nur etwa 1,5:1 Kontrast gegen die Oberfläche, weit unter dem 3:1 WCAG fordert auf Kontrollgrenzen, so interaktive Elemente brauchen einen sichtbaren Rand oder Fokuszustand Es ist client-seitig, frei, keine Anmeldung.

Was ist Neumorphismus im UI-Design?

Neumorphismus, auch Soft UI genannt, ist ein visueller Stil, bei dem Schnittstellenelemente aus ihrem Hintergrund extrudiert oder in diesen gedrückt erscheinen, indem sie gepaarte helle und dunkle Schatten anstelle von Rändern oder kontrastierenden Füllungen verwenden. Der Name mischt & quot; new" und & quot; skeuomorphism" der ältere Stil, der physikalische Materialien imitierte. Der Neumorphismus imitiert ein Material, eine einzelne kontinuierliche Oberfläche, und stützt sich auf eine imaginierte Lichtquelle oben links.

Der Stil wurde um 2020 auf Design-Showcase-Sites populär. Er eignet sich gut für dekorative Paneele, Armaturenbretter auf guten Bildschirmen und einmalige Heldengrafiken. Er eignet sich schlecht für dichte Formen, alles, was im Freien verwendet wird, und jede Steuerung, die ein Benutzer schnell finden muss, aus Gründen, die im Abschnitt Barrierefreiheit behandelt werden.

Wie wirkt der neumorphe Effekt bei CSS?

Der Effekt braucht drei Dinge: eine Hintergrundfarbe auf dem Element, die zur Seite passt, einen Randradius und zwei in entgegengesetzte Richtungen geworfene Schatten Das CSS box-shadow Eigenschaft akzeptiert eine kommagetrennte Liste von Schatten mit jeweils einem x-Offset, einem y-Offset, einem Unschärferadius und einer Farbe, wie auf dokumentiert MDN's Box-Shadow-Referenz und angegeben in CSS-Hintergründe und -Grenzen Level 3drohen

Hier ist die Ausgabe des Generators's Standard-Lichtvoreinstellung:

border-radius: 24px;
background: #e0e0e0;
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff;

Lesen Sie die Schattenliste von links nach rechts Der erste Schatten ist 12 Pixel nach rechts versetzt und 12 nach unten, über 24 Pixel unscharf, in einem Grau dunkler als die Oberfläche: das ist der Schatten auf der vom Licht abgewandten Seite, der zweite ist 12 Pixel nach links versetzt und 12 nach oben in einer Farbe heller als die Oberfläche: das Highlight auf der dem Licht zugewandten Seite Denn der element' eigene Hintergrund ist der gleiche #e0e0e0 Als Seite gibt es keinen sichtbaren Rand Die Form existiert nur als Grenze, an der sich die beiden Schatten treffen.

Warum zeigt sich mein Neumorphismus nicht?

Die häufigste Ursache ist eine Nichtübereinstimmung zwischen dem Element' s Hintergrund und was auch immer dahinter steckt, Wenn die Seite weiß ist und die Karte #e0e0e0Sie sehen eine graue Karte mit einem Schatten, keine weiche Extrusion Stellen Sie den übergeordneten & #39; s-Hintergrund auf die gleiche Farbe wie das Element ein Das Vorschaufeld von generator' s macht dies automatisch, weshalb es genau dort und falsch aussieht, wenn es auf eine weiße Seite eingefügt wird.

Die zweite Ursache ist eine nicht zu erkennende Glanzlichtfarbe Auf einer sehr hellen Fläche kann der " light" Schatten bereits reinweiß sein, auf einer reinweißen Seite ist ein weißer Schatten unsichtbar, auch deshalb wird Neumorphie fast nie auf #ffffffdrohen

Wie werden die hellen und dunklen Schattenfarben berechnet?

Der Generator verschiebt jeden roten, grünen und blauen Kanal der Oberflächenfarbe um den gleichen Betrag: den Intensitätsprozentsatz von 255. Der helle Farbton addiert diesen Betrag und der dunkle Farbton subtrahiert ihn, und jeder Kanal wird auf den Bereich von 0 bis 255 geklemmt und abgerundet.

Hier ist die Berechnung für die standardmäßige Lichtvoreinstellung, Oberfläche #e0e0e0 (224, 224, 224) bei 15% Intensität:

1. Schichtbetrag: 15% von 255 = 38,25.
2. Dunkler Farbton: 224 - 38,25 = 185,75, gerundet auf 186, also sechseckig ba. Ergebnis: #bababadrohen
3. Heller Farbton: 224 + 38,25 = 262,25, auf 255 geklemmt, Sechskant ff. Ergebnis: #ffffffdrohen

Schritt 3 zeigt eine wissenswerte Grenze Auf #e0e0e0 Das Highlight trifft reinweiß, sobald die Intensität vorbei ist (255 - 224) / 255 = 12,2% Jede Intensität darüber, die den Schatten dunkler macht, ohne das Highlight heller zu machen, so wird der Effekt schief Auf hellen Oberflächen halten Sie die Intensität in der Nähe dieses Klemmpunktes, oder wählen Sie eine etwas dunklere Oberfläche, damit das Highlight Platz hat.

Die gleiche Regel gibt den anderen Voreinstellungen:

Voreingestellt	Oberfläche	Abstand / Unschärfe	Intensität	Dunkler Farbton	Lichtschatten
Licht	#e0e0e0	12 / 24 px	15%	#bababa	#ffffff
Karte	#f0f0f3	10 / 20 px	12%	#d1d1d4	#ffffff
Dunkel	#2d2f34	12 / 24 px	12%	#0e1015	#4c4e53
Gedrückt	#e0e0e0	12 / 24 px	15%	#bababa	#ffffff
Konvex	#e0e0e0	12 / 24 px	15%	#bababa	#ffffff

Bei der Dark-Voreinstellung ergibt das Subtrahieren von 30,6 von jedem Kanal von (45, 47, 52) (14, 16, 21) oder #0e1015, und das Hinzufügen ergibt (76, 78, 83) oder #4c4e53. Da die Verschiebung über Kanäle hinweg gleich ist, trägt sich die leichte Blautönung der Oberfläche in beide Farbtöne, sodass eine dunkle neumorphe Karte nicht in flaches neutrales Grau übergeht.

Was verändern die vier Formen?

Form steuert das Element' s Hintergrundfüllung und ob die Schatten außerhalb oder innerhalb davon sitzen Abstand, Unschärfe und Radius verhalten sich für alle vier gleich.

Form	Hintergrund	Schatten	sieht aus wie
Flach	Feste Oberflächenfarbe	Äußere	Ein erhöhtes Plateau
Konvex	linear-gradient(145deg, light, dark)	Äußere	Eine erhöhte Kuppel, von oben links beleuchtet
Konkav	linear-gradient(145deg, dark, light)	Äußere	Eine erhabene Schale, die sich nach innen krümmt
Gedrückt	Feste Oberflächenfarbe	beide inset	Eine Mulde, die in die Seite geschoben wurde

Die Pressed-Voreinstellung ergibt:

border-radius: 24px;
background: #e0e0e0;
box-shadow: inset 12px 12px 24px #bababa, inset -12px -12px 24px #ffffff;

Mit inset, die Schatten sind im Inneren des Elements gezeichnet' s Polsterkasten, so erscheint der dunkle Farbton entlang der linken oberen Innenkante und der Glanzlichter entlang der rechten unteren Das kehrt den Beleuchtungshinweis um und liest sich als Vertiefung Es ist der natürliche & quot; active" oder "on" Zustand für einen Knebel, dessen Ruhezustand flach ist.

Die Convex-Voreinstellung verwendet die vollständigen hellen und dunklen Farbtöne als Farbverlaufsstopps linear-gradient(145deg, #ffffff, #bababa), was eine recht starke Kurve bei 15% Intensität ist Bei einer subtileren Kuppel die Intensität senken; das mildert den Gradienten und die Schatten zusammen, da beide aus den gleichen beiden Farben stammen.

Wie interagieren Entfernung, Unschärfe und Radius?

Die Schieberegler sind unabhängig, das Aussehen hängt jedoch von ihren Verhältnissen ab.

• Entfernung (2 bis 50 px) setzt, wie weit jeder Schatten auf beiden Achsen versetzt ist, Er steuert die scheinbare Höhe: Größere Abstände lassen das Element höher über der Seite schweben.
• Unschärfe (0 bis 100 px) stellt ein, wie weich die Schattenkanten sind Eine Unschärfe um die doppelte Strecke wie in jeder Voreinstellung ergibt den charakteristischen Kissenblick Unschärfe gleich oder unterhalb der Entfernung erzeugt hartkantige Schatten, die eher wie ein Ausschnitt aussehen.
• Radius (0 bis 80 px) rundet die Ecken ab Soft UI verwendet fast immer großzügige Abrundungen; quadratische Ecken mit weichen Schatten sehen aus wie ein Renderfehler.
• Intensität (2 bis 40%) setzt, wie weit sich die Farbtöne von der Oberflächenfarbe entfernen.

Ein praktisches Startverhältnis ist Unschärfe = 2 x Abstand, Radius = 2 x Abstand, Intensität nahe dem Klemmpunkt für Ihre Oberfläche Bei kleinen Elementen wie einem 40-Pixel-Icon-Button wird der Abstand auf 4 bis 6 Pixel herunterskaliert; ein 12-Pixel-Offset auf einem 40-Pixel-Button macht den Schatten größer als die Steuerung.

Ist Neumorphismus zugänglich?

Nicht standardmäßig Eine neumorphe Steuerung' s Rand wird durch Schatten definiert, die sich in der Leuchtdichte nur um wenige Prozent von der Oberfläche unterscheiden, und die die WCAG-Anforderung für die sichtbare Grenze interaktiver Komponenten nicht erfüllen.

WCAG 2.2 Erfolgskriterium 1.4.11, Nicht-Text-Kontrast, erfordert, dass die zur Identifizierung einer Benutzerschnittstellenkomponente benötigten visuellen Informationen und ihre Zustände ein Kontrastverhältnis von mindestens 3:1 gegenüber benachbarten Farben aufweisen Das Kontrastverhältnis verwendet die relative Luminanzformel, die in definiert ist WCAG 2.2. Durcharbeiten für die Standardvoreinstellung:

Paar	Relative Leuchtdichte	Kontrastverhältnis	Erfüllt 3:1?
Dunkler Farbton #bababa vs. Oberfläche #e0e0e0	0,491 vs. 0,745	Ungefähr 1,47:1	kein
Lichtschatten #ffffff vs. Oberfläche #e0e0e0	1.000 vs. 0,745	Ungefähr 1,32:1	kein
Grenze #7f7f7f vs. Oberfläche #e0e0e0	0,212 vs. 0,745	Ungefähr 3,03:1	Nur eben
Grenze #767676 vs. Oberfläche #e0e0e0	0,181 vs. 0,745	Ungefähr 3,44:1	Ja, mit Marge
Text #333333 vs. Oberfläche #e0e0e0	0,033 vs. 0,745	Ungefähr 9,6:1	Ja (gibt auch 4,5:1 für Text durch)

Und diese Schattenfiguren sind der beste Fall. Die Unschärfe verteilt die Schattenfarbe, sodass der größte Teil des sichtbaren Schattens heller ist als #bababa. Auf einer Lichtfläche hilft die Intensitätssteigerung nicht viel, denn das Highlight ist bereits weiß eingespannt.

Um die eigenen Farben zu überprüfen, wird die Farbkontrastprüfung Berechnet das Verhältnis für jedes Paar und das Leitfaden zur Farbkontrastprüfung Formel ausführlich erläutert.

So behalten Sie den Look und übergeben die Kontrastregeln

Sie müssen den Stil nicht aufgeben Sie müssen aufhören, sich für alles, was ein Benutzer wahrnehmen muss, darauf zu verlassen.

1. Verwenden Sie für Behälter eine weiche Benutzeroberfläche, nicht für Steuerelemente. Karten, Tafeln und Deko-Wannen können rein neumorph sein Kriterium 1.4.11 handelt von interaktiven Komponenten und aussagekräftigen Grafiken, so dass ein Behälter, dessen Inhalt sich selbst identifiziert, weit weniger Risiko birgt als ein Knopf, dessen Rand das einzige Zeichen ist, das es gibt.
2. Geben Sie jedem interaktiven Element einen echten Hinweis. Ein 1- oder 2-Pixel-Rand in einer Farbe von 3:1 oder besser, ein kontrastierendes Symbol oder eine Textetikette.
3. Fokus deutlich machen. Fügen Sie ein hinzu :focus-visible Umriss in kontrastreicher Farbe Weiche Schatten sind kein Fokusindikator.
4. Signalisieren Sie den Zustand nicht allein mit der Tiefe. Wenn gedrückt bedeutet & quot; on", ändern Sie auch ein Symbol, eine Beschriftung oder eine Farbe.
5. Respektieren Sie die Benutzereinstellungen. der Präferenskontrast-Medienabfrage Lassen Sie Grenzen hinzufügen oder den Effekt fallen, wenn ein Benutzer mehr Kontrast anfordert.

.neu-button {
  border-radius: 16px;
  background: #e0e0e0;
  box-shadow: 8px 8px 16px #bababa, -8px -8px 16px #ffffff;
  border: 2px solid #767676;
  color: #333333;
}
.neu-button:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 3px;
}
.neu-button[aria-pressed="true"] {
  box-shadow: inset 8px 8px 16px #bababa, inset -8px -8px 16px #ffffff;
}
@media (prefers-contrast: more) {
  .neu-button { box-shadow: none; border-color: #333333; }
}

So erzeugen Sie Schritt für Schritt Neumorphismus-CSS

1. Öffne das Neumorphismusgenerator Und wählen Sie eine Voreinstellung als Ausgangspunkt: Licht, Karte, Dunkel, Gepresst oder Konvex.
2. Stellen Sie die Oberflächenfarbe mit dem Farbwähler so ein, dass sie dem Hintergrund entspricht, auf dem Ihr Element sitzen wird.
3. Passen Sie Abstand und Unschärfe an, um Höhe und Weichheit zu ermitteln, und dann Intensität, um den Kontrast zu ermitteln, und schauen Sie sich die Live-Vorschau an.
4. Wählen Sie eine Form: flach, konkav, konvex oder gedrückt.
5. Stellen Sie den Radius passend zur Elementgröße ein.
6. Klicken Sie auf CSS kopieren und fügen Sie die drei Deklarationen in Ihre Regel ein Denken Sie daran, dem Elternteil die gleiche Hintergrundfarbe zu geben.

Wie unterstützt man helle und dunkle Themen?

Generieren Sie einen Satz von Werten für jedes Theme und tauschen Sie sie mit benutzerdefinierten Eigenschaften aus Die obigen Voreinstellungen für Licht und Dunkel ergeben ein Arbeitspaar:

:root {
  --neu-surface: #e0e0e0;
  --neu-dark: #bababa;
  --neu-light: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --neu-surface: #2d2f34;
    --neu-dark: #0e1015;
    --neu-light: #4c4e53;
  }
}
body, .neu-card { background: var(--neu-surface); }
.neu-card {
  border-radius: 24px;
  box-shadow: 12px 12px 24px var(--neu-dark), -12px -12px 24px var(--neu-light);
}

Dunkler Neumorphismus hat den Spiegel des Licht-Oberflächen-Problems: Der Schatten klemmt sich in Richtung Schwarz, und das Highlight trägt den Effekt Überprüfen Sie den Kontrast separat für jedes Thema.

Neumorphismus, Glasmorphie und schlichte Schatten im Vergleich

Soft UI ist eine von mehreren Möglichkeiten, Tiefe anzuzeigen, und jede hat unterschiedliche Kosten.

Stil	Kern-css	Tiefenhinweis	Kontrastrisiko	gut für
Neumorphismus	Zwei Gegenspieler box-shadow Ebenen, passender Hintergrund	Extrusion von der Seite	Hoch	Dekorplatten, Vitrinen-Armaturenbretter
Glasmorphie	backdrop-filter: blur() und eine durchscheinende Füllung	Frostschicht über Inhalt	Mittel, hängt davon ab, was dahinter steckt	Überlagerungen, Karten über Bildern
Materialstilüberhöhung	Ein oder zwei nach unten box-shadow Schichten	Karte, die über der Seite schwebt	Niedrig	Allgemeine Schnittstellen
Wohnung mit Rändern	border Farben füllen	keine	Niedrigste	Formulare, dichte Daten, Barrierefreiheit-Erstarbeit

der Glasmorphiengenerator Baut den Milchglasstil auf und die Box Schatten Generator Guide Decken einzelne und geschichtete Höhenschatten Für leuchtenden oder geprägten Text statt Kästchen ist die Text-Schattengenerator Typ eine ähnliche Idee anwendet Alle sind auf der Hub für CSS-Toolsdrohen

Ist der Generator privat?

Ja. Vorschau und CSS werden in Ihrem Browser mit JavaScript generiert, nichts wird hochgeladen oder gespeichert, und die Seite funktioniert nach dem Laden offline weiter Das Kopieren des CSS zählt in Richtung eines täglichen Nutzungslimits, und es erscheint eine Meldung, wenn dieses Limit erreicht ist.