Neumorphisme Design CSS Guide Complet

Maîtrisez la technique soft UI avec des ombres doubles, des exigences de couleur et des considérations d'accessibilité.

2 ombres requises Palette monochrome Problèmes contraste WCAG

Le neumorphisme est apparu en 2020 comme tendance de design mêlant skeuomorphisme et design plat. Il crée l'illusion d'éléments extrudés ou enfoncés dans le fond grâce à des ombres soigneusement placées.

La technique repose sur une palette monochrome et deux ombres opposées — une claire, une sombre — appliquées au même élément. Comprendre les mathématiques derrière permet des résultats cohérents et professionnels.

Qu'est-ce que le neumorphisme

Le neumorphisme crée une apparence douce et extrudée en plaçant une ombre claire en haut à gauche et une ombre sombre en bas à droite. Le fond et l'élément partagent la même couleur de base, créant une fusion invisible. Contrairement au design plat, le neumorphisme implique une profondeur physique sans détail photoréaliste.

Outil gratuit Générateur de neumorphisme Créez des effets UI doux extrudés avec des doubles ombres box

La technique de double ombre

Le cœur du neumorphisme est la double box-shadow : une ombre claire décalée vers la source lumineuse (haut-gauche) et une sombre éloignée (bas-droite). La couleur d'ombre est dérivée en éclaircissant et assombrissant la teinte de fond de 10–15%. Les deux ombres utilisent un rayon de flou de 20–30px.

Exigences de couleur

Le neumorphisme ne fonctionne que dans une plage de couleurs étroite. Le fond doit être un ton moyen et les ombres claires et sombres doivent partager la même teinte. Voici le patron CSS :

.card {
  background: #e0e5ec;
  box-shadow:
    8px 8px 20px #b8bec7,
    -8px -8px 20px #ffffff;
  border-radius: 12px;
}
Outil gratuit Générateur de glassmorphisme Créez des effets UI verre dépoli avec CSS backdrop-filter

Convexe vs concave

Les éléments convexes (surélevés) utilisent des ombres vers l'extérieur : claire haut-gauche, sombre bas-droite. Les éléments concaves (enfoncés) utilisent des ombres intérieures avec le mot-clé `inset`. Combiner ombres externes et internes peut simuler un interrupteur.

Problèmes d'accessibilité

Le faible contraste du neumorphisme entre élément et fond ne respecte souvent pas les exigences WCAG 2.1 AA (minimum 3:1 pour les composants UI). Solutions : augmenter l'opacité des ombres, utiliser une bordure pour les états de focus, ou réserver le neumorphisme aux éléments décoratifs.

Quand utiliser le neumorphisme

Le neumorphisme convient mieux aux tableaux de bord, horloges, lecteurs audio et kiosques où l'esthétique de marque prime. À éviter pour la navigation principale et les interfaces à forte densité de texte.

Outil gratuit Générateur de box-shadow Créez des ombres box CSS en couches avec aperçu en direct

FAQ

Qu'est-ce que le neumorphisme en CSS ? +
Le neumorphisme est un style de design utilisant des box-shadows doubles — une claire et une sombre — sur des éléments partageant la couleur du fond, créant une apparence douce extrudée ou enfoncée.
Comment créer la double ombre en CSS ? +
Appliquez box-shadow avec deux valeurs : une ombre claire décalée haut-gauche (x, y négatifs) et une sombre bas-droite (x, y positifs), toutes deux avec un flou de 15–30px.
Quelles couleurs fonctionnent pour le neumorphisme ? +
Les gris à tonalité moyenne et les pastels désaturés. Les couleurs d'ombres doivent partager la même teinte que le fond, éclaircie et assombrie de 10–15%.
Différence entre neumorphisme convexe et concave ? +
Les éléments convexes apparaissent surélevés avec des ombres vers l'extérieur. Les concaves apparaissent enfoncés avec le mot-clé CSS `inset` dans box-shadow.
Le neumorphisme respecte-t-il les normes WCAG ? +
Souvent non. Le faible contraste n'atteint pas le minimum de 3:1 pour les composants UI. Utiliser des bordures ou augmenter l'opacité des ombres.
Puis-je combiner le neumorphisme avec d'autres styles ? +
Oui. Les approches hybrides utilisent des conteneurs neumorphiques avec un contenu plat à l'intérieur, équilibrant texture visuelle et lisibilité.
Quels outils génèrent du CSS neumorphique ? +
Le Générateur Neumorphisme PixCode permet d'ajuster couleur de fond, distance d'ombre, flou et intensité avec aperçu en direct.