CSS · 2 min de lecture · avril 20, 2026
Le guide complet du glassmorphism
Qu’est-ce que le glassmorphism ?
Le glassmorphism imite une plaque de verre dépoli posée au-dessus d’un fond coloré : transparence, flou de l’arrière-plan et fine bordure lumineuse. Popularisé par macOS et Windows, il apporte profondeur et élégance.
La recette de base
.glass {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 18px;
}
Les ingrédients clés
- backdrop-filter: blur() : floute ce qui se trouve derrière l’élément.
- Fond semi-transparent : une opacité de 0,15 à 0,35 donne le meilleur rendu.
- Bordure claire : simule le reflet sur le bord du verre.
Le piège à éviter
L’effet n’est visible que s’il y a du contenu coloré derrière l’élément. Sur un fond uni de la même teinte, le verre disparaît. Posez toujours votre carte sur une image ou un dégradé.
Compatibilité navigateurs
backdrop-filter est supporté par Chrome, Edge, Firefox et Safari récents (préfixe -webkit- pour Safari). Prévoyez un fallback : une couleur de fond plus opaque pour les navigateurs anciens.
@supports not (backdrop-filter: blur(1px)) {
.glass { background: rgba(255, 255, 255, 0.85); }
}
Accessibilité
Le verre dépoli peut nuire à la lisibilité. Renforcez le contraste du texte, ajoutez une ombre portée au texte si besoin, et testez sur fonds clairs comme foncés.
Générez votre verre
Réglez le flou, la transparence et la bordure en direct avec notre générateur de glassmorphism, puis copiez le CSS prêt à l’emploi.