Qu'est-ce que le neumorphism ? Soft UI expliqué avec du code React
Découvrez le neumorphism, la tendance Soft UI qui redéfinit le design d'interface en React grâce à des ombres douces et des surfaces éthérées.
Qu'est-ce que le neumorphism ?
Le neumorphism — contraction de *new* et *skeuomorphism* — est un style de design d'interface apparu vers 2020 qui simule des éléments physiques extrudés ou enfoncés dans une surface monochrome. Contrairement au flat design qui aplatit tout, ou au glassmorphism qui joue sur la transparence, le neumorphism crée une illusion de profondeur subtile grâce à deux ombres portées : une claire et une foncée, projetées dans des directions opposées.
Ce style est souvent appelé Soft UI en raison de son rendu doux et tamisé. Les éléments semblent moulés dans la matière plutôt que simplement superposés. L'effet est obtenu uniquement avec la propriété CSS box-shadow, sans images ni dégradés complexes, ce qui le rend particulièrement adapté aux composants React légers.
Le neumorphism est l'un des 40 styles visuels disponibles sur Empire UI, la bibliothèque React gratuite qui vous permet de basculer entre les tendances de design en un clic. Que vous construisiez une application santé, une banque mobile ou un tableau de bord minimaliste, le Soft UI apporte une touche premium immédiatement reconnaissable.
Les fondamentaux CSS du neumorphism
La magie du neumorphism repose sur deux ombres CSS simultanées. L'ombre claire simule une source lumineuse venant du coin supérieur gauche, tandis que l'ombre sombre crée la contre-ombre. La couleur de fond de l'élément doit être identique à celle du conteneur parent — c'est la règle d'or du Soft UI.
Voici la formule de base en CSS pur. Pour un fond #e0e5ec, on obtient :
``css
.neu-card {
background: #e0e5ec;
border-radius: 16px;
box-shadow:
8px 8px 16px #b8bec7,
-8px -8px 16px #ffffff;
}
.neu-card:active {
box-shadow:
inset 4px 4px 8px #b8bec7,
inset -4px -4px 8px #ffffff;
}
`
L'état :active utilise inset` pour simuler l'enfoncement de l'élément — un détail qui rend l'interaction extrêmement satisfaisante.
Les valeurs d'ombre doivent rester proportionnelles au border-radius : pour un rayon de 16 px, un blur de 16 px est idéal. Augmenter le blur rend l'effet plus doux ; le diminuer le rend plus marqué, presque comme du claymorphism. Vous pouvez expérimenter ces valeurs en temps réel avec le générateur de shadows Tailwind.
Implémenter un composant neumorphique en React
Avec React et Tailwind CSS, on peut encapsuler le style neumorphique dans un composant réutilisable. Empire UI expose directement ces composants via son serveur MCP, mais voici comment en construire un manuellement pour comprendre les mécanismes :
``tsx
import { cn } from '@/lib/utils';
interface NeuCardProps {
children: React.ReactNode;
pressed?: boolean;
className?: string;
}
export function NeuCard({ children, pressed = false, className }: NeuCardProps) {
return (
<div
className={cn(
'rounded-2xl bg-[#e0e5ec] p-6 transition-shadow duration-200',
pressed
? '[box-shadow:inset_4px_4px_8px_#b8bec7,inset_-4px_-4px_8px_#ffffff]'
: '[box-shadow:8px_8px_16px_#b8bec7,-8px_-8px_16px_#ffffff]',
className
)}
>
{children}
</div>
);
}
`
Ce composant accepte une prop pressed` pour alterner entre l'état saillant et l'état enfoncé — parfait pour des boutons toggle ou des cartes interactives.
Pour un bouton neumorphique avec état hover et focus accessibles, il suffit d'ajouter un onClick qui bascule pressed via useState. L'animation de transition duration-200 garantit un retour visuel fluide sans être distrayant. Explorez les templates par industrie d'Empire UI pour voir ces composants intégrés dans des interfaces complètes.
Neumorphism vs autres tendances de design
Le neumorphism occupe une position unique dans le paysage du design moderne. Là où le glassmorphism joue sur la transparence et les flous d'arrière-plan (voir notre guide complet sur le glassmorphism), le neumorphism reste opaque et monochrome. Le premier évoque du verre, le second de l'argile ou du plastique doux.
Face au neobrutalism — son exact opposé — le neumorphism privilégie la subtilité à l'impact visuel brut. Le neobrutalism utilise des bordures épaisses, des couleurs criardes et des ombres à décalage fort ; le neumorphism n'utilise aucune bordure et des couleurs quasi-neutres. Les deux styles sont disponibles sur Empire UI et peuvent être combinés par section de page.
Accessibilité : le neumorphism souffre d'un défaut connu — les contrastes faibles peuvent poser problème aux utilisateurs malvoyants. La solution consiste à renforcer les icônes et textes intérieurs avec un contraste WCAG AA minimum de 4,5:1, et à ne jamais utiliser le Soft UI seul comme indicateur d'état. Utilisez toujours couleur + forme + texte.
Intégrer le neumorphism avec Empire UI
Empire UI est la bibliothèque React gratuite avec le plus grand choix de styles visuels au monde. Elle propose des dizaines de composants prêts à l'emploi dans le style neumorphique : cartes, boutons, champs de formulaire, sliders et barres de progression. Installez-la en une ligne et basculez vers le style Soft UI via le sélecteur de thème intégré.
Le serveur MCP d'Empire UI permet même à votre agent IA (Claude, Cursor, Windsurf…) de générer des composants neumorphiques à la demande. Décrivez votre besoin en langage naturel — *« un card neumorphique avec avatar et badge de statut »* — et le MCP retourne le code TypeScript complet, stylisé et accessible.
Pour aller plus loin, explorez les curseurs personnalisés thématisés Soft UI disponibles sur Empire UI, ou parcourez le blog pour des tutoriels sur le glassmorphism, le claymorphism et toutes les autres tendances de design React. L'ensemble des ressources est gratuit et open-source.
FAQ
Le neumorphism est un style de design d'interface qui crée une illusion de profondeur en utilisant deux ombres CSS opposées — une claire et une sombre — sur une surface monochrome. Les éléments semblent moulés dans le fond plutôt que superposés, d'où le nom « Soft UI ».
Il suffit d'appliquer box-shadow avec deux valeurs : une ombre sombre en bas à droite et une ombre claire en haut à gauche, sur un élément dont la couleur de fond est identique à celle du parent. Par exemple : box-shadow: 8px 8px 16px #b8bec7, -8px -8px 16px #ffffff;.
Le neumorphism présente des défis d'accessibilité en raison de ses faibles contrastes. Il est recommandé de s'assurer que les textes et icônes respectent un ratio de contraste WCAG AA (4,5:1 minimum) et de ne pas utiliser uniquement la forme neumorphique pour indiquer un état interactif.
Le glassmorphism utilise la transparence, les arrière-plans floutés et les teintes colorées pour évoquer du verre, tandis que le neumorphism est opaque et monochrome, simulant une surface plastique ou en argile. Les deux styles sont disponibles sur Empire UI et peuvent coexister dans une même interface.
Oui, parfaitement. Tailwind CSS permet d'injecter des valeurs box-shadow arbitraires via la syntaxe crochets [box-shadow:...], ce qui rend le neumorphism très facile à encapsuler dans des composants React réutilisables. Empire UI propose des composants prêts à l'emploi dans ce style.