Le neumorphisme est le look où un bouton ou une carte semble être pressé hors de la page elle-même, comme une forme moulée à partir de plastique souple Il n'y a pas de bordure, pas de couleur de remplissage qui diffère de l'arrière-plan, juste un surbrillance pâle d'un côté et une ombre douce de l'autre Il photographie magnifiquement dans les maquettes de conception Dans une interface réelle il est facile de se tromper de deux façons : l'effet disparaît, ou les commandes deviennent difficiles à voir.
Les deux problèmes se résument à une petite quantité d'arithmétique sur les couleurs et les ombres Ce guide explique comment l'effet d'interface utilisateur douce est construit à partir de deux box-shadow couches, comment les nuances claires et sombres sont dérivées d'une couleur de surface, ce que les formes plates, concaves, convexes et pressées changent, et comment garder une interface neumorphique utilisable sous les règles de contraste WCAG. Le Générateur de neumorphisme CSS produit tout le code ci-dessous avec un aperçu en direct.
tl;dr : Un élément neumorphe a la même couleur de fond que la page et deux ombres-caissons : un plus sombre décalé vers le bas et vers la droite, et un plus clair décalé vers le haut et vers la gauche En utilisant le mot-clé en médaillon sur les deux, l'élément donne l'impression que l'élément générateur de neumorphisme CSS dérive les deux couleurs d'ombre de votre couleur de surface, avec des curseurs pour la distance (2 à 50 px), le flou (0 à 100 px), l'intensité (2 à 40 %) et le rayon (0 à 80 px), plus les formes plates, concaves, convexes, convexes et pressées La surface lumineuse par défaut
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff. Ces ombres n'atteignent qu'un contraste d'environ 1,5 :1 par rapport à la surface, bien en dessous des limites de contrôle 3 :1 que le WCAG demande, les éléments interactifs ont donc besoin d'une bordure visible ou d'un état de mise au point. C'est côté client, gratuit, sans inscription.
Qu'est-ce que le neumorphisme dans la conception de l'interface utilisateur ?
Le neumorphisme, également appelé interface utilisateur douce, est un style visuel dans lequel les éléments d'interface apparaissent extrudés ou pressés dans leur arrière-plan à l'aide d'ombres claires et sombres appariées au lieu de bordures ou de remplissages contrastés. Le nom mélange " ; new" ; et " ; skeuomorphism" ;, le style plus ancien qui imitait les matériaux physiques Le neumorphisme imite un matériau, une seule surface continue, et repose sur une source de lumière imaginée en haut à gauche.
Le style est devenu populaire sur les sites de vitrines de design vers 2020 Il est bien adapté aux panneaux décoratifs, aux tableaux de bord visualisés sur de bons écrans et aux graphismes de héros ponctuels Il est mal adapté aux formes denses, à tout ce qui est utilisé à l'extérieur, et à tout contrôle qu'un utilisateur doit trouver rapidement, pour des raisons abordées dans la section accessibilité.
Comment fonctionne l'effet neumorphique dans le CSS ?
L'effet a besoin de trois choses : une couleur d'arrière-plan sur l'élément qui correspond à la page, un rayon de bordure et deux ombres projetées dans des directions opposées. Le CSS box-shadow property accepte une liste d'ombres séparées par des virgules, chacune avec un décalage x, un décalage y, un rayon de flou et une couleur, comme documenté sur MDN' ;s référence box-shadow et spécifié dans Contexte et frontières du CSS Niveau 3.
Voici la sortie du générateur' ;s par défaut Light preset :
border-radius: 24px;
background: #e0e0e0;
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff;
Lire la liste d'ombre de gauche à droite La première ombre est décalée de 12 pixels à droite et 12 vers le bas, floue sur 24 pixels, dans un gris plus foncé que la surface : c'est la nuance du côté éloigné de la lumière La seconde est décalée de 12 pixels à gauche et 12 vers le haut dans une couleur plus claire que la surface : la surbrillance du côté tourné vers la lumière Parce que l'élément' ; son propre fond est le même #e0e0e0 en tant que page, il n'y a pas de bord visible La forme n'existe que comme limite où les deux ombres se rencontrent.
Pourquoi mon effet de neumorphisme n'apparaît-il pas ?
La cause la plus fréquente est une inadéquation entre l'élément' ; s fond et tout ce qui se trouve derrière. Si la page est blanche et la carte est #e0e0e0[TRADUCTION], vous voyez une carte grise avec une ombre, pas une extrusion douce Définissez l'arrière-plan parent' ; s sur la même couleur que l'élément Le panneau d'aperçu generator' ; s le fait automatiquement, c'est pourquoi il semble juste là et faux lorsqu'il est collé sur une page blanche.
La deuxième cause est une couleur de surbrillance qui ne peut pas être vue Sur une surface très claire le " ; light" ; shadow peut déjà être blanc pur, et sur une page blanc pur une ombre blanche est invisible C'est aussi pourquoi le neumorphisme n'est presque jamais fait sur #ffffff.
Comment sont calculées les couleurs d'ombre claire et sombre ?
Le générateur décale chaque canal rouge, vert et bleu de la couleur de surface de la même quantité : le pourcentage d'intensité de 255. la teinte claire ajoute cette quantité et la teinte sombre la soustrait, et chaque canal est serré à la plage de 0 à 255 et arrondi.
Voici le calcul pour la lumière par défaut préréglée, surface #e0e0e0 (224, 224, 224) à une intensité de 15 % :
- Montant du quart de travail : 15 % de 255 = 38,25.
- Teinte foncée : 224 - 38,25 = 185,75, arrondie à 186, qui est hexagonale
ba. Résultat:#bababa. - Teinte claire : 224 + 38,25 = 262,25, serrée à 255, hex
ff. Résultat:#ffffff.
L'étape 3 montre une limite qui mérite d'être connue #e0e0e0 la surbrillance frappe le blanc pur une fois l'intensité passée (255 - 224) / 255 = 12,2 %. Toute intensité au-dessus qui rend l'ombre plus sombre sans rendre la surbrillance plus brillante, de sorte que l'effet devient déséquilibré. Sur les surfaces claires, gardez l'intensité près de ce point de serrage ou choisissez une surface légèrement plus foncée pour que la surbrillance ait de la place.
La même règle donne les autres préréglages :
| Préréglé | Surface | Distance/flou | Intensité | Ombre foncée | Teinte claire |
|---|---|---|---|---|---|
| Lumière | #e0e0e0 |
12 /24 px | 15 % | #bababa |
#ffffff |
| Carte | #f0f0f3 |
10 /20 px | 12% | #d1d1d4 |
#ffffff |
| Sombre | #2d2f34 |
12 /24 px | 12% | #0e1015 |
#4c4e53 |
| Pressé | #e0e0e0 |
12 /24 px | 15 % | #bababa |
#ffffff |
| Convexe | #e0e0e0 |
12 /24 px | 15 % | #bababa |
#ffffff |
Sur le préréglage Dark, soustraire 30,6 de chaque canal de (45, 47, 52) donne (14, 16, 21), ou #0e1015(, et l'ajouter donne (76, 78, 83), ou #4c4e53. Parce que le décalage est égal entre les canaux, la légère teinte bleue de la surface se transforme dans les deux nuances, de sorte qu'une carte neumorphe sombre ne se transforme pas en gris neutre plat.
Que changent les quatre formes ?
La forme contrôle le remplissage de l'arrière-plan element' ; s et si les ombres sont assises à l'extérieur ou à l'intérieur de celui-ci La distance, le flou et le rayon se comportent de la même manière pour les quatre.
| Forme | fond | Ombres | apparence |
|---|---|---|---|
| Plat | Couleur de surface solide | Extérieur | Un plateau surélevé |
| Convexe | linear-gradient(145deg, light, dark) |
Extérieur | Un dôme surélevé, éclairé du haut à gauche |
| Concave | linear-gradient(145deg, dark, light) |
Extérieur | Un plat en relief courbé vers l'intérieur |
| Pressé | Couleur de surface solide | l'un et inset |
Un creux enfoncé dans la page |
Le préréglage Pressed produit :
border-radius: 24px;
background: #e0e0e0;
box-shadow: inset 12px 12px 24px #bababa, inset -12px -12px 24px #ffffff;
Avec inset(traduction), les ombres sont dessinées à l'intérieur de la boîte de rembourrage element' ; s, de sorte que la teinte sombre apparaît le long du bord intérieur supérieur gauche et la surbrillance en bas à droite. Cela inverse le signal d'éclairage et se lit comme une dépression. C'est le " ; active" ; ou " ; on" ; état pour une bascule dont l'état de repos est plat.
Le préréglage Convex utilise les nuances claires et sombres comme arrêts de gradient linear-gradient(145deg, #ffffff, #bababa)[TRADUCTION], qui est une courbe assez forte à 15 % d'intensité Pour un dôme plus subtil, abaissez l'intensité ; cela adoucit le gradient et les ombres ensemble, puisque les deux proviennent des deux mêmes couleurs.
Comment la distance, le flou et le rayon interagissent-ils ?
Les curseurs sont indépendants, mais le look dépend de leurs ratios.
- Distance (2 à 50 px) définit la distance à laquelle chaque ombre est décalée sur les deux axes Il contrôle la hauteur apparente : des distances plus grandes font flotter l'élément plus haut au-dessus de la page.
- Flou (0 à 100 px) définit la douceur des bords d'ombre Un flou autour de deux fois la distance, comme dans chaque préréglage, donne l'aspect caractéristique oreiller Blur égal ou inférieur à la distance produit des ombres aux bords durs qui ressemblent plus à une découpe.
- Rayon (0 à 80 px) arrondit les coins Soft UI utilise presque toujours un arrondi généreux ; les coins carrés avec des ombres douces ressemblent à une erreur de rendu.
- Intensité (2 à 40 %) définit la distance entre les nuances et la couleur de la surface.
Un rapport de démarrage pratique est flou = 2 x distance, rayon = 2 x distance, intensité près du point de serrage pour votre surface Pour les petits éléments tels qu'un bouton icône de 40 pixels, mesurez la distance jusqu'à 4 à 6 pixels ; un décalage de 12 pixels sur un bouton de 40 pixels rend l'ombre plus grande que le contrôle.
Le neumorphisme est-il accessible ?
Pas par défaut. Un contrôle neumorphique' ; Le bord est défini par des ombres qui diffèrent de la surface de seulement quelques pour cent en luminance, ce qui ne répond pas à l'exigence WCAG concernant la limite visible des composants interactifs.
WCAG 2.2 Critère de réussite 1.4.11, Contraste non textuel1, nécessite que les informations visuelles nécessaires pour identifier un composant d'interface utilisateur et ses états aient un rapport de contraste d'au moins 3 :1 par rapport aux couleurs adjacentes. Le rapport de contraste utilise la formule de luminance relative définie dans WCAG 2.2. Le travailler pour le préréglage par défaut :
| Paire | Luminance relative | Rapport de contraste | Rencontre 3 :1? |
|---|---|---|---|
Ombre foncée #bababa vs surface #e0e0e0 |
0,491 contre 0,745 | Vers 1h47:1 | non |
Teinte claire #ffffff vs surface #e0e0e0 |
1 000 contre 0,745 | Vers 13h32:1 | non |
Frontière #7f7f7f vs surface #e0e0e0 |
0,212 contre 0,745 | Vers 3h03:1 | Juste |
Frontière #767676 vs surface #e0e0e0 |
0,181 contre 0,745 | Vers 3h44:1 | Oui, avec marge |
Texte #333333 vs surface #e0e0e0 |
0,033 contre 0,745 | Environ 9,6:1 | Oui (passe également 4,5 :1 pour le texte) |
Et ces figures d’ombre sont le meilleur des cas. Le flou étale la couleur de l’ombre, de sorte que la majeure partie de l’ombre visible est plus claire #bababa. Augmenter l'intensité n'aide pas beaucoup sur une surface lumineuse, car la surbrillance est déjà serrée en blanc.
Pour vérifier vos propres couleurs, le vérificateur de contraste de couleurs calcule le rapport pour n'importe quelle paire, et le guide de vérification du contraste des couleurs explique la formule en détail.
Comment garder le look et passer les règles de contraste
Vous n'avez pas à abandonner le style Il faut cesser de compter sur lui pour tout ce qu'un utilisateur doit percevoir.
- Utilisez l'interface utilisateur logicielle pour les conteneurs, pas pour les commandes. Les cartes, panneaux et puits décoratifs peuvent être purement neumorphes Le critère 1.4.11 concerne les composants interactifs et les graphiques significatifs, de sorte qu'un conteneur dont le contenu s'identifie comporte beaucoup moins de risques qu'un bouton dont le bord est le seul signe qu'il existe.
- Donnez à chaque élément interactif un véritable signal. Une bordure de 1 ou 2 pixels dans une couleur de 3 :1 ou mieux, une icône contrastée ou une étiquette de texte.
- Mettre la concentration au point évident. Ajouter un
:focus-visiblecontour dans une couleur à contraste élevé Les ombres douces ne sont pas un indicateur de focalisation. - Ne signalez pas l’état avec la profondeur seule. Si vous appuyez sur signifie " ; sur" ;, changez également une icône, une étiquette ou une couleur.
- Respecter les paramètres utilisateur. le requête multimédia préfers-contrast vous permet d'ajouter des bordures ou de supprimer l'effet lorsqu'un utilisateur demande plus de contraste.
.neu-button {
border-radius: 16px;
background: #e0e0e0;
box-shadow: 8px 8px 16px #bababa, -8px -8px 16px #ffffff;
border: 2px solid #767676;
color: #333333;
}
.neu-button:focus-visible {
outline: 3px solid #1d4ed8;
outline-offset: 3px;
}
.neu-button[aria-pressed="true"] {
box-shadow: inset 8px 8px 16px #bababa, inset -8px -8px 16px #ffffff;
}
@media (prefers-contrast: more) {
.neu-button { box-shadow: none; border-color: #333333; }
}
Comment générer le neumorphisme CSS, étape par étape
- Ouvrez le générateur de neumorphisme et choisissez un préréglage comme point de départ : Lumière, Carte, Foncé, Pressé ou Convexe.
- Définissez la couleur de la surface avec le sélecteur de couleur pour qu'elle corresponde à l'arrière-plan sur lequel votre élément s'assoira.
- Ajustez la distance et le flou pour la hauteur et la douceur, puis l'intensité pour le contraste, en regardant l'aperçu en direct.
- Choisissez une forme : plate, concave, convexe ou pressée.
- Définissez le rayon en fonction de la taille de l'élément.
- Cliquez sur Copier CSS et collez les trois déclarations dans votre règle N'oubliez pas de donner au parent la même couleur d'arrière-plan.
Comment soutenez-vous les thèmes clairs et sombres ?
Générez un ensemble de valeurs pour chaque thème et échangez-les avec des propriétés personnalisées Les préréglages Light and Dark ci-dessus donnent une paire de travail :
:root {
--neu-surface: #e0e0e0;
--neu-dark: #bababa;
--neu-light: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--neu-surface: #2d2f34;
--neu-dark: #0e1015;
--neu-light: #4c4e53;
}
}
body, .neu-card { background: var(--neu-surface); }
.neu-card {
border-radius: 24px;
box-shadow: 12px 12px 24px var(--neu-dark), -12px -12px 24px var(--neu-light);
}
Le neumorphisme sombre a le miroir du problème de la surface lumineuse : l'ombre se serre vers le noir, et le surlignage porte l'effet Vérifiez le contraste séparément pour chaque thème.
Comparaison du neumorphisme, du glassmorphisme et des ombres unies
L'interface utilisateur logicielle est l'une des nombreuses façons de montrer la profondeur et chacune a des coûts différents.
| Style | CSS de base | Indice de profondeur | Risque de contraste | bien pour |
|---|---|---|---|---|
| Neumorphisme | Deux opposés box-shadow calques, fond correspondant |
Extrusion de la page | Élevé | Panneaux décoratifs, tableaux de bord vitrine |
| Glassmorphisme | backdrop-filter: blur() et un remplissage translucide |
Couche gelée sur le contenu | Moyen, dépend de ce qui est derrière | Superpositions, cartes sur images |
| Élévation de style matériel | Un ou deux vers le bas box-shadow couches |
Carte flottant au-dessus de la page | Faible | Interfaces générales |
| Plat avec des bordures | border et remplissez les couleurs |
nul | Plus bas | Formes, données denses, accessibilité-premier travail |
le générateur de glassmorphisme construit le style en verre dépoli et le guide du générateur d'ombre de boîte couvre les ombres d'élévation simples et en couches Pour le texte brillant ou en relief plutôt que pour les cases, le générateur d'ombres textuelles applique une idée similaire au type Tous sont répertoriés sur le Hub d'outils CSS.
Le générateur est-il privé ?
Oui. L'aperçu et le CSS sont générés dans votre navigateur avec JavaScript, rien n'est téléchargé ou stocké et la page continue de fonctionner hors ligne une fois chargée. La copie du CSS compte vers une limite d'utilisation quotidienne et un message apparaît si cette limite est atteinte.
