Glassmorphism : définition, CSS et différences avec le neumorphism

Glassmorphism : définition de l'effet verre dépoli

Le glassmorphism est un style de design d'interface qui donne aux cartes, menus et fenêtres l'aspect d'une plaque de verre dépoli posée au-dessus du contenu. Le nom vient de l'anglais glass, le verre, et de la terminaison morphism, déjà utilisée pour le skeuomorphism. En français, on lit parfois glassmorphisme, mais le terme anglais reste le plus courant chez les designers.

Visuellement, tout tient en trois éléments. D'abord une surface translucide, qui laisse passer une partie de la couleur du fond. Ensuite un flou, le background blur : ce qui se trouve derrière la carte devient une tache douce au lieu d'une image nette. Enfin une bordure fine et claire, qui marque l'arête du verre. Le frosted-glass effect, littéralement l'effet verre givré, désigne exactement ce mélange.

D'où vient cette tendance UI

L'idée n'est pas neuve. Windows Vista proposait déjà en 2007 ses fenêtres Aero en verre, puis iOS 7 a généralisé les panneaux floutés sur iPhone. Le terme glassmorphism a été popularisé fin 2020 par le designer Michal Malewicz, au moment où macOS Big Sur remettait la transparence au cœur de l'interface. En 2025, Apple a encore poussé la logique avec Liquid Glass, son nouveau langage visuel, ce qui explique les nombreuses recherches sur le glassmorphism Apple.

À quoi sert le glassmorphism dans une interface

Un effet de style n'a d'intérêt sur un site d'entreprise que s'il aide le visiteur à comprendre et à agir. Bien utilisé, le verre dépoli rend plusieurs services concrets en UX et UI.

• Créer de la profondeur : la carte semble flotter au-dessus du fond, ce qui sépare clairement les plans de lecture.
• Garder le contexte : un menu ou une fenêtre modale en verre laisse deviner la page en dessous, l'utilisateur sait où il se trouve.
• Mettre en avant un bloc précis : une offre, un formulaire ou un appel à l'action ressort mieux posé sur une photo floutée.
• Donner une image moderne : le style évoque les interfaces Apple et Microsoft récentes, ce qui rassure sur le sérieux technique de la marque.

Le glassmorphism ne remplace pas une bonne hiérarchie visuelle. C'est une finition, qui fonctionne quand la structure de la page, pensée dès le wireframe, est déjà solide.

Comment ça marche : le glassmorphism en CSS

Le cœur technique du glassmorphism CSS est la propriété backdrop-filter. Contrairement à filter, qui floute l'élément lui-même, backdrop-filter applique le flou à tout ce qui se trouve derrière lui. C'est cette nuance qui produit le glass effect : la carte reste nette, seul l'arrière-plan visible à travers elle devient flou.

Les ingrédients d'une carte en verre

• Un fond semi-transparent, par exemple background: rgba(255, 255, 255, 0.15), pour teinter légèrement le verre.
• Le flou : backdrop-filter: blur(12px), avec sa version préfixée -webkit-backdrop-filter pour les anciennes versions de Safari.
• Une bordure : border: 1px solid rgba(255, 255, 255, 0.3), qui dessine le bord lumineux de la vitre.
• Des coins arrondis et une ombre légère, pour renforcer l'impression d'objet posé.
• Un arrière-plan riche : un dégradé, des formes colorées ou une photo, sinon le flou n'a rien à montrer.

Ce dernier point surprend souvent. Sur un fond blanc uni, l'effet est invisible, puisque flouter du blanc donne du blanc. Le verre a besoin de couleurs et de contrastes derrière lui pour exister. Vous pouvez aussi régler l'intensité de la transparence et du flou selon le rôle du bloc : léger pour une barre de navigation, plus marqué pour une fenêtre qui doit isoler son contenu.

Glassmorphism dans Figma

Côté maquette, le glassmorphism Figma s'obtient sans plugin. On applique à un rectangle un remplissage blanc à faible opacité, puis l'effet Background blur dans le panneau des effets, et un contour clair. Des plugins et des générateurs en ligne proposent des réglages prêts à l'emploi et le code correspondant, pratique pour passer de la maquette au développement. Les bibliothèques de composants comme shadcn/ui n'offrent pas de thème verre par défaut, mais leurs cartes se prêtent bien à l'exercice avec quelques classes de flou.

Glassmorphism, neumorphism, brutalisme : quelles différences

Ces trois tendances sont souvent citées ensemble, alors qu'elles reposent sur des philosophies presque opposées. Les comparer aide à choisir celle qui sert vraiment votre marque.

Le neumorphism : le relief en douceur

Apparu sur Dribbble fin 2019, le neumorphism donne l'impression que les boutons sont moulés dans la même matière que le fond. Tout repose sur deux ombres, une claire et une sombre, appliquées à des éléments de la même couleur que l'arrière-plan. Le rendu est doux et tactile, mais le contraste est très faible : un bouton se distingue mal d'une simple décoration, ce qui pose de vrais problèmes d'usage.

Le brutalisme : la franchise assumée

Le brutalisme web prend le contrepied des deux autres. Polices système ou très grasses, couleurs vives en aplat, bordures noires épaisses, grilles visibles : rien n'est adouci. Bien maîtrisé, il produit des sites mémorables et très lisibles. Mal dosé, il donne l'impression d'un site inachevé, ce qui peut freiner un prospect qui cherche à être rassuré.

Le comparatif en bref

• Glassmorphism : transparence et flou, sensation de profondeur et de légèreté, adapté aux sites modernes riches en visuels.
• Neumorphism : ombres douces et relief, rendu élégant mais contraste faible, à réserver à des détails.
• Brutalisme : aplats, typographie forte et bordures épaisses, idéal pour se démarquer, risqué pour une marque qui doit inspirer confiance.

Exemple concret : une carte tarifaire en verre dépoli

Ce qui fait marcher l'exemple, c'est la retenue. Un seul bloc en verre, posé là où se joue la conversion, et un voile sombre ajouté sous le texte pour garantir le contraste même si la photo change. Le reste de la page revient à des fonds pleins. Sur mobile, la carte passe en pleine largeur et le flou est réduit, dans la logique du responsive design.

Les erreurs courantes du glassmorphism

La plupart des ratés viennent d'un même réflexe : appliquer l'effet partout parce qu'il est joli. Voici les pièges qui reviennent le plus souvent lors des audits de sites.

• Un contraste insuffisant : du texte blanc sur un verre clair posé sur une photo claire devient illisible. Les règles d'accessibilité web demandent un ratio de 4,5 pour 1 pour le texte courant.
• Un fond trop uniforme : sans dégradé ni image derrière, le verre ressemble à un simple rectangle gris.
• Trop de couches superposées : un verre sur un verre sur un verre brouille la hiérarchie et alourdit le rendu.
• Aucune solution de repli : si backdrop-filter n'est pas pris en charge ou désactivé, prévoyez un fond plus opaque qui reste lisible.
• Oublier les préférences de l'utilisateur : certains systèmes proposent de réduire la transparence, une media query permet de respecter ce choix.

Un site qui rapporte doit d'abord être lisible, rapide et clair. Le style vient ensuite. C'est l'approche que nous appliquons en création de site internet : choisir une tendance graphique parce qu'elle sert le parcours du visiteur, pas parce qu'elle est à la mode.

Questions fréquentes