CSS Neumorphismus Generator

Einstellungen

Vorschau & CSS

 
   
 
 
   
 
 
 
So wird's verwendet
 
     
  1. Grundfarbe wählen — Neumorphismus funktioniert am besten mit mitteltonigen Farben. Die Schatten werden automatisch daraus abgeleitet.
    2.  
  2. Form auswählen — Zwischen flach, gedrückt, konkav und konvex wechseln, um die Tiefenillusion zu verändern.
    3.  
  3. Abstand & Unschärfe anpassen — Abstand steuert den Schattenversatz; Unschärfe die Weichheit. Höhere Werte = stärkeres 3D-Gefühl.
    4.  
  4. CSS kopieren — Auf „CSS kopieren" klicken, um die vollständigen box-shadow- und background-Regeln zu erhalten.
    5.  
 
 
 
Was ist Neumorphismus?
 
Neumorphismus (Soft UI) ist ein Designtrend, der die Illusion von extrudierten oder gedrückten Elementen durch zwei gerichtete box-shadow-Werte erzeugt — einen helleren und einen dunkleren als die Grundhintergrundfarbe.
 
Er verbindet die taktile Tiefe des Skeuomorphismus mit der Sauberkeit des Flat Designs. Voraussetzung: Element und Hintergrund teilen dieselbe Farbe, nur Schatten vermitteln Relief.
 
 
 
Häufige Anwendungsfälle
 
 
Dashboard-Widgets
 
Toggle-Schalter
 
Knöpfe & Regler
 
Karten-Komponenten
 
Eingabefelder
 
Icon-Container
 
Musik-Player-UIs
 
Smart-Home-Oberflächen
 
 
Tipps & Best Practices
 
 
 Nur mitteltonige Hintergründe 
Neumorphismus funktioniert nicht auf reinem Weiß oder Schwarz. Ein mittelgraues oder pastellfarbenes Farbton verwenden, damit beide Schatten sichtbar bleiben.
 
 
 Barrierefreiheit beachten 
Neumorphische Elemente können sehr niedrigen Kontrast haben. Interaktive Elemente immer auf WCAG-2.1-Kontrast prüfen und deutliche Fokuszustände hinzufügen.
 
 
 Sparsam einsetzen 
Neumorphismus nur auf wichtige interaktive Elemente anwenden, nicht auf jede Komponente. Übermäßiger Einsatz erzeugt visuelle Ermüdung.
 
 
 Gedrückter Zustand 
Für Buttons die Schattenrichtungen bei :active umkehren, um einen physischen Druck zu simulieren. Das verbessert die wahrgenommene Interaktivität erheblich.
 
 
 
Häufig gestellte Fragen
 
 
Ist Neumorphismus schlecht für die Barrierefreiheit?
 
Er kann es sein. Der niedrige Kontrast zwischen Elementen und Hintergründen ist ein häufiges Barrierefreiheitsproblem. Immer mit einem Kontrast-Checker testen und zusätzliche visuelle Indikatoren für interaktive Zustände bereitstellen.
 
 
 
Welche CSS-Eigenschaften erzeugen Neumorphismus?
 
Hauptsächlich box-shadow mit zwei Werten: ein heller Schatten in einer Richtung und ein dunkler in der entgegengesetzten. Der background des Elements entspricht exakt dem des Elternelements.
 
 
 
Was ist der Unterschied zwischen Neumorphismus und Glasmorphismus?
 
Neumorphismus verwendet passende Hintergründe mit dualen Schatten für ein erhabenes/gedrücktes Gefühl. Glasmorphismus verwendet Transparenz und Unschärfe für mattes Glas. Beide sind eigenständige, aber ergänzende Trends.
 
 
 
Kann ich Neumorphismus mit Dunkelmodus kombinieren?
 
Ja. Einen dunklen mitteltonigen Grundton verwenden (z.B. #2d2d2d) und einen helleren sowie dunkleren Schatten daraus ableiten. Dunkler Neumorphismus ist zunehmend beliebt.