Générateur de Neumorphism
Créez le look soft-UI en relief : ombres duales claires et sombres, 4 modes de forme et contrôle total sur la lumière, la profondeur et la douceur.
Astuce : le neumorphism exige que le fond de l'élément corresponde au fond de la page — le générateur configure les deux.
Comment utiliser le générateur de Neumorphism
- Choisissez une couleur de base — le soft UI fonctionne mieux avec des couleurs claires et légèrement atténuées.
- Choisissez la direction de la source lumineuse ; les ombres tombent du côté opposé.
- Réglez Distance et Flou pour la profondeur, et Intensité pour le contraste entre ombre claire et sombre.
- Basculez entre les formes Plat, Concave, Convexe et Pressé pour boutons, cartes et champs.
- Copiez le CSS (paire background + box-shadow) ou la classe Tailwind dans votre projet.
À propos de ce générateur de Neumorphism
Le neumorphism (soft UI) donne l'impression que les éléments sont extrudés de l'arrière-plan en combinant deux ombres : une ombre sombre d'un côté et un reflet clair de l'autre, l'élément étant rempli de la même couleur que le fond de la page. Le résultat est un style d'interface doux, tactile, presque physique, pour cartes, boutons et interrupteurs.
Ce générateur calcule automatiquement les couleurs d'ombre claire et sombre à partir de votre couleur de base et les associe à quatre modes de forme : plat (extrusion classique), concave et convexe (remplissages en dégradé pour surfaces courbes) et pressé (ombres inset pour états enfoncés). Rappelez-vous : le fond de l'élément doit correspondre au fond de la page pour que l'illusion fonctionne — l'aperçu montre les deux ensemble.
FAQ Neumorphism
Pourquoi le neumorphism ne fonctionne-t-il pas sur ma page ?
Le style dépend de la fusion de l'élément avec son arrière-plan : l'élément doit utiliser la même couleur de fond (ou une couleur très proche) que la surface derrière lui. Si le fond de votre page diffère de la couleur de base choisie, mettez l'un des deux à jour — c'est pourquoi le générateur peint la scène d'aperçu avec la même couleur.
Quelles couleurs fonctionnent le mieux pour le soft UI ?
Les couleurs claires et légèrement désaturées (environ 85–95 % de luminosité) fonctionnent le mieux car le reflet plus clair et l'ombre plus sombre restent tous deux visibles. Le blanc pur tue le reflet ; le noir pur tue l'ombre. Le curseur d'Intensité contrôle l'écart des deux tons par rapport à la couleur de base.
Quelle est la différence entre concave et convexe ?
Les deux ajoutent un subtil remplissage en dégradé linéaire par-dessus les ombres duales. Convexe bombe vers le spectateur (plus clair vers la source lumineuse), comme un bouton en relief. Concave se courbe vers l'intérieur, comme un plat creux — utile pour les puits et les champs de saisie. Pressé utilise des ombres inset, pour un état actif/enfoncé.
Le neumorphism est-il accessible ?
Le soft UI est naturellement peu contrasté, utilisez-le donc pour des conteneurs décoratifs plutôt que des contrôles critiques. Assurez-vous que le texte et les icônes respectent les ratios de contraste WCAG, et envisagez d'ajouter un contour de focus aux éléments interactifs.
Comment les couleurs d'ombre claire et sombre sont-elles calculées ?
Le générateur éclaircit la couleur de base vers le blanc pour le reflet et l'assombrit vers le noir pour l'ombre, le tout mis à l'échelle par le curseur d'Intensité. Cela garde les deux tons dans la même famille de teinte, ce qui rend l'effet doux et naturel.