Neumorphismus Soft UI Generator
Erstellen Sie weiche UI-Neumorphismus-CSS-Effekte mit anpassbaren Doppelschatten und 4 Formtypen.
① Farbe & Form wählen ② Schattenabstand & Blur anpassen ③ CSS kopieren
Soft UI
Farb-Presets:
light#ffffff
dark#b0bdcf
150px
16px
10px
20px
15%
CSS-Code
.neumorphic {
background: #e0e5ec;
border-radius: 16px;
box-shadow: 10px 10px 20px #b0bdcf, -10px -10px 20px #ffffff;
/* light: #ffffff | dark: #b0bdcf */
}Was ist Neumorphismus?
Neumorphismus (Soft UI) ist ein UI-Design-Trend, der plastisch extrudierte Oberflächen durch die Kombination von Flat Design und Skeuomorphismus erzeugt. Er verwendet zwei sorgfältig gestaltete duale Box-Schatten — einen hellen (Highlight) und einen dunklen (Schatten) — mit entgegengesetzten Versätzen. CSS: box-shadow: 10px 10px 20px #darkColor, -10px -10px 20px #lightColor. Für die gedrückte Variante das inset-Schlüsselwort verwenden. Die Schattenfarben werden durch Anpassen der HSL-Helligkeit um ±15–25% berechnet.
Häufig gestellte Fragen
Neumorphismus kombiniert Flat Design und Skeuomorphismus. Elemente erscheinen aus dem Hintergrund extrudiert durch doppelte Box-Schatten.
Zwei box-shadows mit entgegengesetzten Versätzen. Beispiel: box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff.
Flach: Schatten außen. Konkav: radiales Farbverlauf eingedrückt. Konvex: erhaben. Gedrückt: Schatten innen mit inset.
Mitteltöne. Farben um #e0e5ec oder #2d3436 sind beliebte Ausgangspunkte.
Hat Barrierefreiheitsprobleme: geringer Kontrast. WCAG 2.1-Anforderung oft nicht erfüllt.
Am besten für Dashboard-Widgets, Karten, Musikplayer-Steuerelemente.
HSL-Helligkeit berechnen, hellere (+15-25%) und dunklere (-15-25%) Version erstellen. Dieses Tool berechnet automatisch.