Générateur de neumorphisme (Soft UI)
Le neumorphisme donne l’impression que les éléments émergent du fond grâce à deux ombres opposées, une claire et une sombre. Réglez chaque paramètre, choisissez d’où vient la lumière et copiez le CSS.
Traité à 100 % dans votre navigateur
Ctrl + Enter exécuterCtrl + C copier le résultat
Comment l’utiliser
- 1Choisissez la couleur de base : le fond et l’élément partagent la même couleur.
- 2Réglez taille, rayon, distance, intensité et flou des ombres.
- 3Sélectionnez la forme (plate, concave, convexe ou enfoncée) et la direction de la lumière.
- 4Copiez le CSS ou partagez un lien vers votre design.
Cas d’usage
- Boutons, interrupteurs et contrôles à l’aspect tactile.
- Cartes et panneaux de tableaux de bord minimalistes.
- Interfaces de domotique, lecteurs de musique ou calculatrices.
- Explorer les tendances de design pour des maquettes et Dribbble.
Questions fréquentes
Qu’est-ce que le neumorphisme ?
Un style de design (neumorphism ou soft UI) où les éléments semblent moulés dans la même matière que le fond. Il repose sur deux box-shadow opposées : une plus claire côté lumière et une plus sombre de l’autre côté.
Quelle différence entre plate, concave, convexe et enfoncée ?
La forme plate utilise une couleur unie ; concave et convexe ajoutent un dégradé simulant une surface creusée ou bombée ; enfoncée utilise des ombres inset pour que l’élément paraisse pressé.
Le neumorphisme est-il accessible ?
Son faible contraste peut rendre les limites des boutons et champs difficiles à voir. Associez-le à des icônes claires, un texte suffisamment contrasté et des états de focus visibles.
Fonctionne-t-il sur fond sombre ?
Oui, mais baissez l’intensité : sur des couleurs très sombres, l’ombre claire prend le dessus. Il fonctionne mieux avec des gris moyens et des couleurs pastel.