Comment créer un effet neumorphism (Soft UI) en CSS
Publié le 15 septembre 2026 · 2 min de lecture
Le neumorphism — le look doux, apparemment extrudé de "soft UI" — repose sur deux ombres compensatoires, l'une plus claire et l'autre plus sombre que la couleur de base, positionnées sur des coins opposés. Cet outil calcule automatiquement les bonnes couleurs d'ombre à partir de votre couleur de base et vous permet de prévisualiser des états surélevés ou enfoncés.
Essayer Générateur de NeumorphismÉtapes
- 1
Ouvrez le Générateur de Neumorphism
Accédez au générateur de neumorphism.
- 2
Choisissez une couleur de base
Choisissez la couleur de fond de l'élément — les couleurs claires et sourdes fonctionnent mieux pour cet effet.
- 3
Définissez la distance, le flou et l'intensité
Ajustez à quelle distance les ombres se situent de l'élément et à quel point le contraste clair/sombre est prononcé.
- 4
Choisissez surélevé ou enfoncé
Choisissez si l'élément doit avoir l'air de ressortir ou d'être enfoncé.
Questions fréquentes
L'outil éclaircit et assombrit votre couleur de base choisie selon le niveau d'intensité que vous définissez, générant automatiquement une ombre claire et sombre assortie plutôt que de nécessiter que vous les choisissiez séparément.
Surélevé utilise des ombres extérieures régulières pour un élément qui semble ressortir de la surface ; enfoncé utilise des ombres intérieures pour le look opposé, affaissé vers l'intérieur.
Cela fonctionne mieux avec des couleurs claires à moyennes, assez désaturées, puisque l'effet repose sur des différences de luminosité subtiles plus difficiles à voir contre des fonds très sombres ou hautement saturés.
Comme le calcul des ombres se fait automatiquement, vous obtenez des ombres neumorphiques correctement équilibrées sans choisir manuellement deux couleurs séparées par essais et erreurs.