Générateur de neumorphism CSS
Réglez la couleur de fond, la distance, le flou et l'intensité pour composer un effet neumorphism (ombre douce imitant un relief) et récupérez le code CSS correspondant, avec aperçu en direct. Le calcul se fait entièrement dans votre navigateur.
Comment ça marche
Le neumorphism donne l'illusion qu'un élément est légèrement en relief ou creusé dans son fond, grâce à deux ombres opposées de même couleur que l'arrière-plan : une plus claire vers le haut-gauche, une plus sombre vers le bas-droit. Cet outil calcule ces deux teintes à partir de la couleur de fond choisie et compose la propriété box-shadow correspondante en direct.
Pourquoi les deux ombres doivent-elles avoir la même couleur de base ?
L'effet neumorphism repose sur une variation de luminosité d'une seule et même couleur (l'arrière-plan), et non sur des couleurs contrastées comme dans une ombre classique ; c'est cette proximité de teinte qui donne l'impression douce et "moulée" caractéristique du style, plutôt qu'une ombre portée traditionnelle.
Sur quels éléments utiliser cet effet ?
Le neumorphism convient bien aux boutons, cartes, champs de formulaire ou icônes sur un fond uni clair ou sombre ; il est en revanche difficile à lire sur un fond avec image ou dégradé, et pose parfois des problèmes d'accessibilité par manque de contraste, à tester avant une utilisation à grande échelle.
Aucune donnée n'est envoyée à un serveur : la composition de l'ombre s'effectue entièrement dans votre navigateur.