Glassmorphism CSS : l'effet verre dépoli pas à pas

Le Glassmorphism CSS est l'aspect verre dépoli que l'on voit sur les panneaux macOS, les widgets iOS et les tableaux de bord modernes : une carte translucide qui floute l'arrière-plan. Tout l'effet repose sur deux déclarations, backdrop-filter: blur() et un background semi-transparent, superposés sur un fond coloré. Maîtrisez-les et ajoutez une fine bordure lumineuse, et le verre semblera réel.

Voici la partie que la plupart des générateurs omettent. La carte elle-même représente les 20% faciles. La raison pour laquelle votre version semble terne alors que les visuels Dribbble semblent vivants est presque toujours l'arrière-plan derrière le verre, pas le verre lui-même. Ce guide construit l'effet de zéro, corrige les trois éléments qui le rendent bon marché, et couvre la compatibilité navigateur à connaître avant de déployer.

Ce qu'est réellement le Glassmorphism CSS#

Le glassmorphism est une surface en verre dépoli créée en floutant le contenu situé derrière un élément plutôt que l'élément lui-même. Vous superposez un remplissage de faible opacité sur backdrop-filter: blur(), ajoutez une fine bordure lumineuse, et laissez un arrière-plan vif transparaître. Le flou combiné à la transparence crée l'illusion du "verre réel".

Cette distinction est importante. filter: blur() floute l'élément auquel vous l'appliquez. backdrop-filter: blur() floute tout ce qui est peint derrière lui et laisse le contenu de l'élément net. Le glassmorphism nécessite la seconde propriété, c'est pourquoi une simple erreur de nom de propriété est la raison la plus courante pour laquelle l'effet "ne fait rien".

Le rendu nécessite trois ingrédients obligatoires et une touche facultative :

• Un arrière-plan semi-transparent (généralement blanc ou noir avec une opacité de 10 à 25 %).
• Un flou d'arrière-plan pour adoucir l'arrière-plan en un effet dépoli.
• Un arrière-plan vif et multicolore derrière la carte pour avoir quelque chose d'intéressant à flouter.
• Un bord en surbrillance de 1px en inset qui simule la façon dont la lumière frappe un bord en verre.

L'erreur la plus fréquente est de tester le glassmorphism sur une page plate ou blanche. Il n'y a rien à flouter, donc la carte ressemble à un gris de faible opacité. Construisez-le toujours sur un dégradé ou une photo.

Comment créer l'effet CSS Glassmorphism#

Voici la recette complète. Suivez les étapes dans l'ordre, car chacune corrige une manière spécifique dont l'effet peut paraître plat.

Étape 1 : Placer un dégradé vif derrière la carte#

L'arrière-plan fait l'essentiel du travail visuel. Une carte givrée sur un mur gris donne un givre gris. Une carte givrée sur un dégradé magenta-cyan donne l'effet recherché. Commencez par l'arrière-plan, pas par la carte.

body {
  min-height: 100vh;
  background: linear-gradient(135deg, #7b2ff7 0%, #f107a3 50%, #00c6ff 100%);
}

Deux ou trois teintes saturées et contrastées mélangées produisent le flou de couleur doux qui évoque le verre. Si vous n'êtes pas sûr des couleurs qui fonctionnent une fois floutées, construisez l'arrière-plan avec un générateur de dégradé CSS gratuit et prévisualisez quelques combinaisons avant de vous décider. Les dégradés ternes ou à faible contraste deviennent boueux sous le flou, alors testez.

Étape 2 : Ajouter la couche semi-transparente#

Maintenant la carte. Donnez-lui un remplissage qui laisse transparaître l'arrière-plan. Du blanc à faible opacité fonctionne sur la plupart des fonds ; du noir à faible opacité convient aux scènes sombres ou néon.

.glass {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 2rem;
}

Utilisez rgba() (ou la syntaxe moderne rgb(255 255 255 / 12%)) plutôt que la propriété opacity. Définir opacity atténue l'élément entier, y compris son texte et ses enfants. Vous voulez seulement l'arrière-plan translucide, jamais le contenu posé sur le verre.

Étape 3 : Appliquer le flou d'arrière-plan#

C'est la ligne qui transforme une boîte translucide en verre dépoli.

.glass {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 2rem;
}

Un rayon de flou entre 8px et 16px est idéal. En dessous de 6px, le givre est à peine visible ; au-dessus de 20px, l'arrière-plan se dissout en bouillie et on perd l'impression qu'il y a du contenu réel derrière le verre. Associez toujours la propriété standard à -webkit-backdrop-filter, car Safari a encore besoin du préfixe.

Étape 4 : Ajouter la bordure lumineuse qui fait la différence#

Voici le détail que presque tous les générateurs oublient, et c'est ce qui distingue le "CSS évident" du "vrai verre". Le verre réel capte la lumière sur ses bords supérieur et gauche. On simule cela avec une bordure légère, fine et semi-transparente.

.glass {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  padding: 2rem;
}

La bordure claire de 1px évoque le rebord brillant d'un panneau de verre. Pour un bord encore plus réaliste, superposez un reflet intérieur avec box-shadow. La ligne blanche intérieure imite la lumière se réfractant le long du bord interne :

.glass {
  /* ...propriétés précédentes... */
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

Ce reflet inset 0 1px 0 est l'ingrédient secret. L'ombre externe soulève la carte de la page ; la ligne intérieure donne au bord supérieur cet éclat vitreux caractéristique.

Étape 5 : Ajuster la profondeur et le contraste#

Une fois les quatre ingrédients en place, ajustez selon vos goûts :

• Opacité contrôle le givrage. Plus faible (8 à 12%) est plus transparent ; plus élevée (18 à 25%) est plus laiteuse et plus lisible pour le texte.
• Rayon de flou contrôle la douceur de l'arrière-plan. Plus de flou signifie plus de givrage et moins de détails visibles derrière.
• Ombre externe contrôle la distance à laquelle la carte flotte au-dessus de la page. Adoucissez-la et étalez-la pour une sensation plus élevée.
• Opacité de la bordure contrôle la visibilité du rebord en verre. Un rebord plus brillant équivaut à un verre plus brillant.

Un exemple complet copier-coller#

En rassemblant toutes les étapes, voici un extrait fonctionnel complet que vous pouvez intégrer dans n'importe quel projet.

<div class="glass">
  <h2>Carte en verre dépoli</h2>
  <p>Flou d'arrière-plan sur un dégradé vif.</p>
</div>

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #7b2ff7 0%, #f107a3 50%, #00c6ff 100%);
}

.glass {
  max-width: 360px;
  padding: 2rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: #fff;
}

Remplacez le dégradé par votre propre palette, réduisez l'opacité si le texte devient difficile à lire, et vous obtenez une carte en verre prête pour la production. Si vous souhaitez réutiliser les mêmes teintes pour les boutons, les badges et l'arrière-plan de la page, verrouillez-les avec un générateur de palette de couleurs pour le design de marque afin que toute l'interface reste cohérente.

Les propriétés qui contrôlent l'apparence#

Utilisez ceci comme référence rapide pour paramétrer une surface vitrée.

Propriété	Effet	Plage typique
backdrop-filter: blur()	Givre le contenu derrière la carte	8px à 16px
background: rgba()	Définit le remplissage translucide	alpha de 0.08 à 0.25
border: 1px solid rgba()	Bordure légère simulant un bord en verre	alpha de 0.2 à 0.3
box-shadow (externe)	Soulève la carte de la page	doux, large, faible alpha
box-shadow (interne)	Rehaut intérieur net sur le bord supérieur	inset 0 1px 0 blanc
border-radius	Arrondit les coins (le verre est rarement anguleux)	12px à 24px

Vous pouvez aussi combiner les valeurs de backdrop-filter. Ajouter une touche de saturation fait ressortir les couleurs d'arrière-plan à travers le givre : backdrop-filter: blur(12px) saturate(160%). Ce coup de pouce de saturation est une astuce favorite pour rendre le verre plus riche sans modifier le remplissage de la carte elle-même.

Compatibilité navigateur et les pièges que personne ne mentionne#

backdrop-filter est bien pris en charge sur Chrome, Edge, Safari et Firefox modernes, mais il existe des écueils réels qui vous poseront problème en production.

• Safari nécessite le préfixe. Ajoutez toujours -webkit-backdrop-filter en plus de la propriété standard. Sans cela, Safari affiche une boîte translucide plate sans flou.
• Firefox l'a longtemps verrouillé. backdrop-filter est activé par défaut depuis Firefox 103. Les versions plus anciennes nécessitaient un flag, donc les très vieux Firefox affichent le remplissage mais pas le givre. Pour la plupart des utilisateurs, ce n'est plus un problème, mais si vos statistiques montrent du trafic sur d'anciens Firefox, prévoyez un repli.
• C'est gourmand en GPU. Chaque élément backdrop-filter force le navigateur à ré-échantillonner et flouter l'arrière-plan. Une page avec des dizaines de cartes floutées, ou un flou sur une liste défilante, peut faire chuter le framerate sur les appareils faibles. Utilisez-le sur quelques surfaces principales, pas sur chaque élément de liste.

Le modèle de repli propre est une requête de fonctionnalité. Donnez à tous une boîte opaque lisible, puis passez au vrai givre uniquement là où le navigateur le supporte :

.glass {
  background: rgba(255, 255, 255, 0.7); /* repli lisible */
}

@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .glass {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

Avertissement d'accessibilité : un texte blanc à faible opacité sur un dégradé chargé peut échouer aux tests de contraste. Le verre est superbe dans les maquettes mais échoue avec de vrais utilisateurs. Augmentez l'opacité du remplissage, assombrissez le texte, ou ajoutez une couche solide subtile derrière le texte pour qu'il reste lisible sur n'importe quel arrière-plan.

Quand utiliser le glassmorphisme (et quand l'éviter)#

Le glassmorphisme brille sur les superpositions placées au-dessus de contenus riches : barres de navigation sur une image hero, fenêtres modales sur un tableau de bord, cartes de widgets sur un dégradé. Le flou crée de la profondeur et laisse entrevoir la couche inférieure, ce qui est exactement l'indice spatial qu'il est censé transmettre.

C'est le mauvais choix quand il n'y a rien de significatif derrière la carte, quand la lisibilité du texte est cruciale (lecture longue, tableaux de données), ou quand vous devez le répéter des centaines de fois sur une même page. Dans ces cas, une carte pleine avec une ombre douce est plus performante et se lit plus clairement.

Considérez le verre comme un assaisonnement, pas comme le plat principal. Une ou deux surfaces vitrées sur un fond dégradé fort semblent haut de gamme. Vingt d'entre elles empilées sur une page plate ressemblent à un bug.

Conclusion#

Le glassmorphism CSS est vraiment simple une fois que vous connaissez la recette complète : un fond dégradé vif, un remplissage semi-transparent, backdrop-filter: blur() avec le préfixe WebKit, et une bordure claire de 1px avec un reflet intérieur pour simuler le bord du verre. La carte est la partie facile. Le fond et le contour sont ce qui la rend réaliste plutôt que terne.

Commencez par maîtriser le dégradé, car tout le reste se superpose dessus. Créez et prévisualisez votre fond avec le générateur de dégradé CSS gratuit, lisez le guide approfondi sur les fonds dégradés CSS modernes pour des idées de palettes, puis placez la carte en verre par-dessus. Lorsque vous êtes prêt à exporter le design en image plate, un convertisseur SVG en PNG gratuit transforme vos vecteurs exportés en ressources raster nécessaires.

Foire aux questions#

Pourquoi mon CSS de verre dépoli semble-t-il plat ou gris ? Presque toujours parce qu'il n'y a rien de vif derrière la carte. L'effet givré floute l'arrière-plan, donc sur une page blanche ou grise, le résultat est juste un gris terne à faible opacité. Placez un dégradé saturé et multicolore ou une photo derrière le verre et l'effet prend vie instantanément.

Quelle est la différence entre le flou de filtre et le flou de filtre d'arrière-plan ? filter: blur() floute l'élément auquel il est appliqué, y compris son propre texte et ses enfants. backdrop-filter: blur() floute uniquement le contenu peint derrière l'élément tout en gardant le contenu de l'élément net. Le verre dépoli nécessite backdrop-filter, c'est pourquoi utiliser le mauvais rend l'effet inopérant.

Le filtre d'arrière-plan fonctionne-t-il dans tous les navigateurs ? Il fonctionne dans Chrome, Edge, Safari et Firefox 103 et versions ultérieures modernes. Safari nécessite le préfixe -webkit-backdrop-filter en plus de la propriété standard, et les très anciennes versions de Firefox l'avaient derrière un drapeau. Utilisez une requête de fonctionnalité @supports avec un fond de secours opaque pour couvrir les navigateurs qui ne le supportent pas.

Pourquoi devrais-je éviter la propriété d'opacité pour les cartes en verre ? La propriété opacity atténue l'ensemble de l'élément, y compris le texte ou les boutons placés sur le verre, ce qui rend le contenu illisible. Utilisez plutôt une valeur de fond rgba() ou rgb()/... pour que seul le remplissage soit translucide tandis que le contenu reste totalement opaque.

Le verre dépoli est-il mauvais pour les performances ? Cela peut l'être. Chaque élément backdrop-filter force le navigateur à ré-échantillonner et flouter les pixels derrière lui, ce qui est intensif pour le GPU. Quelques surfaces en verre vont bien, mais flouter des dizaines de cartes ou l'appliquer dans une liste défilante peut faire chuter les images sur les appareils bas de gamme, donc utilisez-le avec parcimonie sur les éléments principaux.

Comment rendre le verre dépoli accessible ? Surveillez le contraste du texte. Un texte clair à faible opacité sur un dégradé chargé échoue souvent aux vérifications de contraste WCAG. Augmentez l'opacité du remplissage, assombrissez ou mettez en gras le texte, ou ajoutez une couche solide subtile derrière le bloc de texte pour qu'il reste lisible quelle que soit la couleur de l'arrière-plan qui transparaît à cet endroit.