Générateur de Neumorphisme CSS

Contrôles

Aperçu & CSS

 
   
 
 
   
 
 
 
Comment l'utiliser
 
     
  1. Choisissez une couleur de base — Le neumorphisme rend mieux avec des couleurs moyennes. Les ombres en sont dérivées automatiquement.
    2.  
  2. Choisissez la forme — Basculez entre les styles plat, enfoncé, concave et convexe pour changer l'illusion de profondeur.
    3.  
  3. Ajustez distance & flou — La distance contrôle le décalage de l'ombre ; le flou contrôle la douceur. Des valeurs plus élevées = effet 3D plus marqué.
    4.  
  4. Copiez le CSS — Cliquez sur « Copier le CSS » pour récupérer les règles box-shadow et background complètes.
    5.  
 
 
 
Qu'est-ce que le neumorphisme ?
 
Le neumorphisme (soft UI) est une tendance de design qui crée l'illusion d'éléments en relief ou enfoncés à l'aide de deux valeurs box-shadow directionnelles — une plus claire et une plus sombre que la couleur d'arrière-plan de base.
 
Il mêle la profondeur tactile du skeuomorphisme à la sobriété du flat design. L'exigence clé est que l'élément et son arrière-plan partagent la même couleur, les ombres fournissant le seul sens du relief.
 
 
 
Cas d'usage courants
 
 
Widgets de tableau de bord
 
Interrupteurs à bascule
 
Boutons rotatifs & curseurs
 
Composants de cartes
 
Champs de saisie
 
Conteneurs d'icônes
 
Interfaces de lecteurs audio
 
Interfaces domotiques
 
 
Conseils & bonnes pratiques
 
 
 Arrière-plans à tons moyens uniquement 
Le neumorphisme échoue sur le blanc ou le noir pur. Utilisez un gris moyen ou une teinte pastel pour que les ombres claire et sombre restent visibles.
 
 
 Enjeux d'accessibilité 
Les éléments neumorphiques peuvent avoir un contraste très faible. Vérifiez toujours que les éléments interactifs respectent les exigences de contraste WCAG 2.1. Ajoutez des états de focus clairs.
 
 
 Utilisez avec parcimonie 
Appliquez le neumorphisme aux éléments interactifs clés, pas à chaque composant. L'excès crée une fatigue visuelle et alourdit les pages.
 
 
 État enfoncé 
Pour les boutons, inversez les directions d'ombre sur :active pour simuler une pression physique. Cela améliore grandement l'interactivité perçue.
 
 
 
Questions fréquentes
 
 
Le neumorphisme nuit-il à l'accessibilité ?
 
Cela peut. Le faible contraste entre les éléments et leurs arrière-plans est un problème d'accessibilité courant. Testez toujours avec un vérificateur de contraste et fournissez des indicateurs visuels supplémentaires pour les états interactifs.
 
 
 
Quelles propriétés CSS créent le neumorphisme ?
 
Principalement box-shadow avec deux valeurs : une ombre claire décalée dans une direction et une ombre sombre dans la direction opposée. Le background de l'élément correspond exactement à celui du parent.
 
 
 
Quelle différence entre neumorphisme et glassmorphism ?
 
Le neumorphisme utilise des arrière-plans identiques avec des ombres doubles pour créer un effet en relief/enfoncé. Le glassmorphism utilise transparence et flou pour simuler du verre dépoli. Ce sont des tendances complémentaires mais distinctes.
 
 
 
Puis-je combiner neumorphisme et mode sombre ?
 
Oui. Utilisez une base sombre à ton moyen (par ex. #2d2d2d) et générez-en une ombre plus claire et une plus sombre. Le neumorphisme sombre est de plus en plus populaire.