Qu'est-ce que le glassmorphism et comment le construire en CSS ?
Le glassmorphism est l'effet verre dépoli popularisé par macOS Big Sur, le Centre de contrôle iOS et Windows 11. Une carte semble être faite de verre teinté et flouté qui laisse transparaître l'arrière-plan. C'est un standard de l'UI moderne pour les overlays, sidebars, navbars et modales.
En CSS, c'est un empilement de quelques propriétés : `backdrop-filter: blur()` floute ce qui se trouve derrière l'élément, un fond translucide ajoute la teinte, une bordure blanche à 30 % simule le rebord du verre, une ombre douce détache l'élément du fond.
Vous choisissez ici un arrière-plan coloré (dégradé ou pseudo-photo) et voyez l'effet en direct. Des curseurs contrôlent la force du flou, la saturation des couleurs derrière le verre, la couleur de teinte et son alpha. La sortie est un bloc CSS `.glass {...}` prêt à l'emploi.
Mode d'emploi
- Choisissez un arrière-plan parmi les tuiles (dégradés, photo synthétique). L'arrière-plan doit être coloré et varié pour que le flou se voie.
- Blur = force du flou (16-24 px est moderne, 30-40 px est le rendu lourd de verre dépoli).
- Saturate = saturation des couleurs derrière le verre (100 % = original, 180 % = boosté, donne le rendu premium).
- Tint + alpha = légère coloration du verre. Blanc avec alpha 0,1-0,3 pour le mode clair, noir avec alpha 0,3 pour le sombre.
- Border en blanc à 30 % d'alpha simule le rebord du verre. Shadow détache la carte du fond. Copiez le CSS et collez-le dans votre feuille de style.
Quand ça aide
Le glassmorphism est un standard du design moderne, surtout pour les UI en overlay. Quelques endroits où il brille :
- Navbar par-dessus une hero photo. Navbar transparente et floutée, le contenu défile en dessous, on la voit à travers le verre.
- Modale / boîte de dialogue. La carte flotte au-dessus d'un fond assombri, avec l'arrière-plan flouté visible à travers le verre.
- Sidebar d'application (Notion, Linear). Particulièrement à droite par-dessus le contenu.
- Cartes dans une hero section. Trois cartes de fonctionnalités avec l'effet verre dépoli sur un fond coloré.
- Overlay de lecteur musical. Apple Music / Spotify desktop est un cas d'école du glassmorphism.
- Toast de notification. Un fond légèrement flouté garde le toast lisible sans cacher le contexte.
À retenir : le glassmorphism a besoin de couleur derrière le verre. Sur un fond blanc uni, l'effet est invisible. Les meilleurs résultats sont sur une photographie, un dégradé ou une section colorée. Pour un flou simple sans teinte, voir box-shadow. Pour l'arrondi des coins, utilisez border-radius.