Neomorphism-CSS-Generator
Baue weiche, geprägte UI-Oberflächen.
Neomorphism nutzt gepaarte helle und dunkle Schatten auf passendem Hintergrund, damit Elemente weich geprägt wirken. Lege Hintergrund, Abstand, Intensität und Radius fest und kopiere das CSS.
Oberflächenfarbe
20px
60%
16px
background: #e0e5ec; border-radius: 16px; box-shadow: 20px 20px 30px rgba(174, 181, 195, 0.60), -20px -20px 30px rgba(255, 255, 255, 0.60);
So baust du Neomorphism
- Wähle eine Hintergrundfarbe; weiche Pastellgrautöne funktionieren am besten.
- Wähle den hellen oder dunklen Modus.
- Passe Abstand, Intensität und Radius mit den Schiebereglern an.
- Kopiere das CSS und verwende es auf Elementen mit gleicher Hintergrundfarbe.
Häufig gestellte Fragen
Warum muss das Element die Hintergrundfarbe teilen?
Die Illusion hängt davon ab, dass beide Schatten mit derselben Oberflächenfarbe verschmelzen – Element und Elternelement sollten also übereinstimmen.
Was ist der Unterschied zwischen hellem und dunklem Modus?
Der dunkle Modus nutzt dezente weiße und schwarze Schatten auf dunklem Hintergrund statt des klassischen hellgrauen Looks.
Ist Neomorphism barrierefrei?
Verwende ihn mit ausreichend Kontrast für Text und verlasse dich nie allein auf den Schatten, um Bedienbarkeit anzuzeigen.