Glassmorphism et dégradés : guide pratique

Le glassmorphism est un style de design fait de verre dépoli : des panneaux translucides qui floutent ce qui se trouve derrière eux, superposés à un fond coloré, en général un dégradé. Le panneau garde un soupçon de la couleur dessous, un fin bord clair capte la lumière, et toute l’interface paraît en couches et physique. Les systèmes d’exploitation utilisent des matières translucides depuis des années, et en 2025 Apple a fait du verre le cœur de son nouveau langage de design Liquid Glass : ce style n’est donc pas près de disparaître. Utilisé sans soin, il produit pourtant des boîtes grises et du texte illisible.

Pourquoi le glassmorphism a besoin d’un dégradé

Le verre dépoli ne ressemble à du verre que s’il y a derrière lui quelque chose de coloré à flouter. Sur un fond blanc ou gris uni, un panneau de verre n’est qu’un gris légèrement différent. Sur un riche dégradé, avec des nappes de couleur à différents endroits, le panneau capte une couleur douce qui glisse d’un bord à l’autre, et c’est ce glissement que l’œil lit comme du verre. Le dégradé n’est donc pas de la décoration : c’est la moitié de l’effet.

Les meilleurs fonds pour le verre ont des zones de couleur fortes et séparées et une base sombre ou profonde, un peu comme les dégradés mesh ou les dégradés aurore. Placez la nappe la plus vive en partie derrière un panneau : le panneau rayonnera là où ils se chevauchent.

Le CSS derrière le glassmorphism

Le cœur de l’effet est backdrop-filter, qui applique un filtre à tout ce qui se trouve derrière un élément plutôt qu’à l’élément lui-même. Combinez-le avec un remplissage semi-transparent, une fine bordure translucide et une ombre douce. Les versions actuelles des principaux navigateurs le prennent en charge, et les anciennes versions de Safari demandent le préfixe -webkit- ; voyez MDN sur backdrop-filter et caniuse.

.glass {
  background: rgb(255 255 255 / 0.12);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: 20px;
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.25);
  color: #ffffff;
}

/* Without backdrop-filter, use a solid, readable panel instead */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgb(15 23 42 / 0.88); }
}

/* Respect people who ask for less transparency, where supported */
@media (prefers-reduced-transparency: reduce) {
  .glass { background: rgb(15 23 42 / 0.92); }
}

Glassmorphism et contraste

Le plus gros problème du verre est que son texte repose sur ce qui se trouve derrière le panneau. Un titre qui se lit bien sur une zone indigo sombre peut disparaître quand le panneau défile sur une lueur rose pâle. Le contraste doit tenir dans le pire cas, pas dans celui de votre maquette. Les WCAG demandent 4,5:1 pour le texte courant ; vérifiez au point le plus clair qui puisse jamais se trouver derrière les mots.

Une astuce fiable consiste à teinter le verre vers la couleur la plus sombre du fond plutôt qu’avec du blanc. Un verre indigo sombre à 50 % sur un dégradé indigo et rose garde le texte blanc lisible partout, tout en laissant transparaître la couleur. Pour d’autres façons de garder les mots nets, voyez le texte sur un dégradé.

Quand le glassmorphism aide, et quand il n’aide pas

• Utile : navigation flottante, boîtes de dialogue, commandes multimédias, cartes sur un bandeau d’accueil et widgets façon écran de verrouillage, là où la couche doit paraître au-dessus du contenu
• Utile : pages produit et de lancement où le dégradé est la marque et où le verre le met en valeur
• Déconseillé : formulaires, tableaux et lecture longue, où l’on a besoin d’un contraste calme et constant
• Déconseillé : pages avec de nombreuses couches de verre empilées, qui paraissent boueuses et coûtent en performances
• Déconseillé : partout où le fond est uni ou chargé de photos et de petit texte

Comment concevoir une interface en verre

1. 1

   Concevez d’abord le fond

   Choisissez un dégradé avec des nappes de couleur séparées sur une base profonde. Le verre ne sera bon que dans la mesure de ce qu’il y a derrière.

2. 2

   Limitez le verre à une ou deux couches

   La navigation et un niveau de cartes suffisent largement. Du verre sur du verre sur du verre devient gris.

3. 3

   Floutez assez pour dissoudre le détail

   Si vous distinguez encore des formes derrière le panneau, augmentez d’abord le flou avant toute autre chose.

4. 4

   Teintez pour le contraste

   Choisissez la couleur et l’opacité du remplissage qui gardent le texte lisible sur la partie la plus claire du fond.

5. 5

   Ajoutez un bord clair et une ombre douce

   Une bordure translucide de 1 px et une large ombre discrète font lire le panneau comme une plaque physique.

6. 6

   Testez les performances sur mobile

   Le flou d’arrière-plan est coûteux à dessiner. Gardez des zones floutées modestes et évitez de les animer sur de grandes surfaces.

Le verre est l’une des matières qu’un dégradé peut porter ; la texture des dégradés la compare au grain, au papier et à la soie. Si vous voulez un fond qui a déjà les nappes, la profondeur et la lumière dont le verre a besoin, de nombreux Marks du Marché sont faits ainsi, et vous pouvez créer avec n’importe lequel gratuitement.