Neumorphismus CSS Design Vollständige Anleitung

Meistern Sie die Soft-UI-Technik mit dualen Schatten, Farbanforderungen und Barrierefreiheitsüberlegungen.

2 Schatten erforderlich Monochrome Palette WCAG-Kontrastprobleme

Neumorphismus entstand 2020 als Designtrend, der Skeuomorphismus und Flat Design verbindet. Er erzeugt die Illusion von Elementen, die aus dem Hintergrund herausragen oder hineingedrückt werden.

Die Technik basiert auf einer monochromen Palette und zwei gegenüberliegenden Schatten — einem hellen und einem dunklen — auf demselben Element. Das Verständnis der Mathematik dahinter ermöglicht konsistente Ergebnisse.

Was ist Neumorphismus

Neumorphismus erzeugt ein weiches, extrudiertes Erscheinungsbild durch einen hellen Schatten oben-links und einen dunklen Schatten unten-rechts. Hintergrund und Element teilen dieselbe Grundfarbe. Im Gegensatz zu Flat Design impliziert Neumorphismus physische Tiefe ohne fotorealistisches Detail.

Kostenloses Tool Neumorphism Generator Erstelle weiche UI-Extrusionseffekte mit doppelten Box Shadows

Die duale Schattentechnik

Der Kern des Neumorphismus ist die duale box-shadow: ein heller Schatten zur Lichtquelle (oben-links) und ein dunkler Schatten davon weg (unten-rechts). Die Schattenfarbe wird durch Aufhellen und Abdunkeln des Hintergrundtons um 10–15% abgeleitet. Beide Schatten verwenden einen Weichzeichner von 20–30px.

Farbanforderungen

Neumorphismus funktioniert nur in einem engen Farbbereich. Der Hintergrund muss ein mittlerer Ton sein, und die hellen und dunklen Schatten müssen denselben Farbton teilen. Hier ist das CSS-Muster:

.card {
  background: #e0e5ec;
  box-shadow:
    8px 8px 20px #b8bec7,
    -8px -8px 20px #ffffff;
  border-radius: 12px;
}
Kostenloses Tool Glassmorphism Generator Erstelle mattglas UI-Effekte mit CSS backdrop-filter

Konvex vs. konkav

Konvexe Elemente (erhöht) verwenden nach außen gerichtete Schatten: hell oben-links, dunkel unten-rechts. Konkave Elemente (eingedrückt) verwenden einwärts gerichtete Schatten mit dem `inset`-Schlüsselwort. Die Kombination beider Schatten kann einen Schalter simulieren.

Barrierefreiheitsprobleme

Der geringe Kontrast zwischen Element und Hintergrund erfüllt häufig nicht die WCAG 2.1 AA-Anforderungen (mindestens 3:1 für UI-Komponenten). Lösungen: Schattenopazität erhöhen, Rahmen für Fokuszustände verwenden oder Neumorphismus auf dekorative Elemente beschränken.

Wann Neumorphismus verwenden

Neumorphismus eignet sich am besten für Dashboards, Uhren, Audio-Player und Kioske, wo Markenästhetik Vorrang hat. Für Hauptnavigation und textlastige Interfaces vermeiden. Hybridansätze kombinieren neumorphische Container mit flachem Inhalt.

Kostenloses Tool Box Shadow Generator Erstelle geschichtete CSS Box Shadows mit Live-Vorschau

FAQ

Was ist Neumorphismus in CSS? +
Neumorphismus ist ein Designstil mit dualen box-shadows — einem hellen und einem dunklen — auf Elementen, die dieselbe Farbe wie der Hintergrund haben.
Wie erstelle ich den dualen Schatten in CSS? +
Wenden Sie box-shadow mit zwei Werten an: ein heller Schatten oben-links (negative x, y) und ein dunkler Schatten unten-rechts (positive x, y), beide mit 15–30px Weichzeichner.
Welche Farben funktionieren für Neumorphismus? +
Mitteltönige Grautöne und desaturierte Pastellfarben. Die Schattenfarben müssen denselben Farbton wie der Hintergrund haben, um 10–15% aufgehellt und abgedunkelt.
Unterschied zwischen konvexem und konkavem Neumorphismus? +
Konvexe Elemente erscheinen erhöht mit nach außen gerichteten Schatten. Konkave erscheinen eingedrückt mit dem CSS-Schlüsselwort `inset` in box-shadow.
Erfüllt Neumorphismus WCAG-Standards? +
Oft nicht. Der geringe Kontrast erfüllt häufig nicht das Minimum von 3:1 für UI-Komponenten. Rahmen oder erhöhte Schattenopazität verwenden.
Kann ich Neumorphismus mit anderen Stilen kombinieren? +
Ja. Hybridansätze verwenden neumorphische Container mit flachem oder Material-Design-Inhalt, um visuelle Textur und Kontrast auszubalancieren.
Welche Tools generieren neumorphisches CSS? +
Der PixCode Neumorphismus-Generator ermöglicht die Anpassung von Hintergrundfarbe, Schattenabstand, Weichzeichner und Intensität mit Live-Vorschau.