Générateur de néomorphisme CSS
Créez des surfaces d'interface douces et reliefes.
Le néomorphisme utilise des ombres claire et foncée appariées sur un fond identique pour donner aux éléments un relief doux. Réglez le fond, la distance, l'intensité et le rayon, puis copiez le CSS.
Couleur de surface
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);
Comment créer du néomorphisme
- Choisissez une couleur de fond ; les gris pastel doux fonctionnent le mieux.
- Choisissez le mode clair ou foncé.
- Ajustez distance, intensité et rayon avec les curseurs.
- Copiez le CSS et utilisez-le sur des éléments de même couleur de fond.
Questions fréquentes
Pourquoi l'élément doit-il partager la couleur de fond ?
L'illusion dépend du mélange des deux ombres avec la même couleur de surface : l'élément et son conteneur doivent donc correspondre.
Quelle différence entre mode clair et foncé ?
Le mode foncé utilise des ombres blanches et noires subtiles sur un fond sombre, plutôt que l'aspect gris clair classique.
Le néomorphisme est-il accessible ?
Utilisez-le avec un contraste suffisant pour le texte et ne comptez jamais sur l'ombre seule pour signaler l'interactivité.