Einen Neumorphismus-Effekt (Soft UI) in CSS erstellen
Veröffentlicht am 15. September 2026 · 2 Min. Lesezeit
Neumorphismus – der weiche, scheinbar herausragende „Soft UI"-Look – beruht auf zwei ausgleichenden Schatten, einem helleren und einem dunkleren als die Grundfarbe, an gegenüberliegenden Ecken positioniert. Dieses Tool berechnet die korrekten Schattenfarben automatisch aus deiner Grundfarbe und lässt dich erhabene oder eingedrückte Zustände in der Vorschau sehen.
Neumorphism-Generator ausprobierenSchritte
- 1
Den Neumorphismus-Generator öffnen
Gehe zum Neumorphismus-Generator.
- 2
Eine Grundfarbe wählen
Wähle die Hintergrundfarbe des Elements – helle, gedeckte Farben funktionieren am besten für diesen Effekt.
- 3
Abstand, Unschärfe und Intensität festlegen
Passe an, wie weit die Schatten vom Element entfernt sitzen und wie ausgeprägt der Hell-Dunkel-Kontrast ist.
- 4
Erhaben oder eingedrückt wählen
Wähle, ob das Element hervortretend oder eingedrückt aussehen soll.
Häufig gestellte Fragen
Das Tool hellt und verdunkelt deine gewählte Grundfarbe um den eingestellten Intensitätsbetrag auf und erzeugt automatisch einen passenden hellen und dunklen Schatten, statt sie separat auswählen zu müssen.
Erhaben verwendet normale äußere Schatten für ein Element, das aus der Oberfläche herauszutreten scheint; eingedrückt verwendet innere Schatten für den gegenteiligen, versunkenen Look.
Es funktioniert am besten mit hellen bis mittleren, eher entsättigten Farben, da der Effekt auf subtilen Helligkeitsunterschieden beruht, die vor sehr dunklen oder stark gesättigten Hintergründen schwerer zu erkennen sind.
Da die Schattenberechnung automatisch erfolgt, erhältst du korrekt ausbalancierte neumorphe Schatten, ohne zwei separate Farben durch Ausprobieren manuell auswählen zu müssen.