Neumorphic
Deux box-shadows antiparallèles — sombre en bas-droite, blanche en haut-gauche — simulent une lumière rasante sur fond uniforme et font saillir chaque composant en Soft UI pur CSS.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Cartes comprend 41 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le neumorphisme repose sur une règle unique : l'élément partage exactement la même couleur de fond que son parent. Ce fond commun (#e0e0e0) est ce qui rend les deux ombres crédibles — si les couleurs diffèrent, l'illusion s'effondre immédiatement.
La paire d'ombres est déclarée dans un seul box-shadow à deux valeurs. La première (#bebebe 12px 12px 24px) projette une ombre sombre en bas à droite : là où la lumière fictive n'atteint pas la surface. La seconde (#fff -12px -12px 24px) projette un reflet clair en haut à gauche : là où la lumière frappe. Ensemble, elles simulent un éclairage rasant venant d'un coin supérieur gauche, lumière fictive caractéristique du Soft UI.
Au survol, les offsets et le rayon de flou passent de 12 px / 24 px à 16 px / 32 px, accentuant la sensation de relief. La propriété transition: .3s lisse la variation pour éviter le saut visuel. Aucun JavaScript n'est nécessaire — l'effet est intégralement géré par CSS.
Pour créer un état enfoncé (champ de saisie, bouton pressé), ajoutez le mot-clé inset devant les deux valeurs : les ombres se retournent à l'intérieur du composant et simulent un creux. La couleur sombre doit rester à environ 8–15 % plus sombre que le fond ; un écart trop grand casse l'illusion de matière, trop faible la rend invisible.
Accessibilité
- prefers-reduced-motion : aucune vérification dans le code — la
transition: .3ssurbox-shadown'est pas désactivée par la media query. L'impact est minimal (pas d'animation autonome, mouvement déclenché par l'utilisateur), mais ajoutez@media (prefers-reduced-motion: reduce) { .card-neumorphic { transition: none } }si l'élément est interactif. - Contraste texte :
#333sur#e0e0e0→ ratio ≈ 9,6:1, bien au-dessus du seuil WCAG AA (4,5:1) et AAA (7:1). - L'élément de démo est un
<div>sans rôle ni label ARIA. Pour un usage interactif (carte cliquable, bouton), ajoutezrole="button",tabindex="0"et unaria-labelexplicite. - Aucun état
:focus-visiblen'est déclaré dans le code. Pour une utilisation interactive au clavier, ajoutez un outline de focus distinct du box-shadow neumorphique. - L'effet reste perceptible en mode contraste fort et en niveau de gris : les deux ombres reposent sur une différence de luminosité, pas de teinte.
Compatibilité navigateur
Requiert box-shadow à valeurs multiples et transition CSS — disponibles dans tous les navigateurs modernes depuis 2013.
Sans box-shadow (IE8 et versions antérieures), la carte s'affiche comme un rectangle plat — aucune erreur JS, la mise en page reste intacte. La transition est ignorée mais le rendu statique est identique.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<div class="card-demo card-neumorphic">
Contenu
</div>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| background: #e0e0e0 | #e0e0e0 | Couleur de base de la carte — doit être identique à la couleur du fond parent. C'est la contrainte centrale : changez-la partout ou nulle part. Pour adapter à d'autres teintes, dérivez les couleurs d'ombre de cette valeur. |
| Ombre sombre : #bebebe | #bebebe | Couleur de l'ombre portée (1re valeur du box-shadow). Doit être 8–15 % plus sombre que le fond : pour #e0e0e0, la plage correcte va de #c8c8c8 à #b0b0b0. Au-delà, l'illusion de matière disparaît. |
| Ombre lumineuse : #fff | #ffffff | Couleur du reflet lumineux (2e valeur, offsets négatifs). Blanc pur pour les fonds clairs. Pour les thèmes pastel ou légèrement colorés, adoptez une teinte légèrement tintée plutôt que du blanc pur. |
| Offset normal : 12px 12px 24px | 12px 12px 24px | Décalage X + Y + rayon de flou pour chaque ombre à l'état repos. Réduisez à 6px 6px 14px pour les petits composants (boutons, badges), augmentez à 20px 20px 40px pour les grandes cartes. |
| Offset hover : 16px 16px 32px | 16px 16px 32px | box-shadow au survol (dans .card-neumorphic:hover). Un ratio ~×1,3 par rapport à l'état repos donne un approfondissement convaincant. Réduisez cet écart pour un hover plus discret. |
| border-radius: 20px | 20px | 50% pour des boutons circulaires, 12px pour un rendu carré / professionnel, 30px pour un look très arrondi. L'arrondi doit rester cohérent entre la carte et ses éléments enfants. |
| transition: .3s | .3s all ease | Durée de la transition hover. .15s pour un retour quasi-immédiat, .5s pour une variation très douce. Pensez à restreindre la propriété : transition: box-shadow .3s évite de transitionner involontairement d'autres propriétés. |
| box-shadow: inset … | absent | Variante enfoncée (champs de saisie, état actif/pressé) : box-shadow: inset #bebebe 4px 4px 10px, inset #fff -4px -4px 10px. Les ombres se retournent à l'intérieur — une inversion sémantique immédiatement lisible. |
FAQ
#bebebe et #fff) sont calculées comme des variations de #e0e0e0 : si la carte passe à une autre teinte sans mettre à jour les ombres, le relief n'est plus cohérent. Modifiez les trois valeurs ensemble — fond parent, fond carte, couleurs d'ombre — ou centralisez-les dans une variable CSS.inset devant les deux valeurs : box-shadow: inset #bebebe 4px 4px 10px, inset #fff -4px -4px 10px. Les ombres se retournent à l'intérieur du composant et simulent un creux. C'est la base des champs de saisie actifs et des états :active dans les interfaces Soft UI.#2a2a3e), l'ombre sombre devient encore plus sombre (#1c1c2e) et le reflet lumineux prend une teinte bleutée (#3a3a5e) plutôt que du blanc pur. La logique reste identique — dériver les deux couleurs du fond commun — mais le résultat est plus subtil et le contraste texte nécessite une vérification WCAG.
