Les panneaux de verre givré sont partout dans la conception d'interface : la barre latérale translucide sur un système d'exploitation de bureau, l'en-tête flou qui laisse passer une photo, la carte qui flotte sur un dégradé sur une page de destination Le look est simple à décrire et curieusement facile à se tromper en CSS. Un panneau finit plat et gris, ou le flou ne fait rien, ou le texte blanc dessus est illisible sur la moitié de l'arrière-plan.
Ce guide explique le CSS qui fait fonctionner l'effet, pourquoi chacune des cinq propriétés est là, comment garder le texte lisible quand l'arrière-plan ne cesse de changer, ce qu'il en coûte dans les performances de rendu, et comment se replier gracieusement Les exemples travaillés utilisent la sortie du Générateur CSS de glassmorphisme Toolz(, qui construit le code à partir de curseurs et d'un aperçu en direct).
tl;dr : Le glassmorphisme est un style d'interface utilisateur dans lequel un panneau ressemble à du verre dépoli : un fond semi-transparent plus
backdrop-filter: blur()ainsi, le contenu derrière elle montre à travers doucement, généralement fini avec une bordure translucide 1 px et une ombre douce Il a besoin de deux choses pour être visible : un remplissage qui est en partie transparent et quelque chose de coloré derrière le panneau Le contraste du texte change avec tout ce qui passe en dessous, alors testez-le contre les parties les plus brillantes et les plus sombres du fond réel Le Générateur de glassmorphisme CSS écrit le bloc complet, y compris le-webkit-préfixe, côté client, gratuit, pas d'inscription.
Qu'est-ce que le glassmorphism dans le CSS ?
Le glassmorphisme est un style visuel qui imite le verre dépoli Un élément obtient une couleur de fond avec une faible opacité et un filtre de fond qui brouille les pixels derrière lui, de sorte que les formes et les couleurs en dessous semblent ramollies à travers la surface Une fine bordure lumineuse suggère le bord du verre, et une ombre douce soulève le panneau de la page.
La propriété clé est backdrop-filter(, défini dans le W3C) Module Effets de filtre Niveau 2. Il prend les mêmes fonctions de filtre que filter (blur(), saturate(), brightness() et le reste) mais les applique à la zone derrière l'élément plutôt qu'à l'élément lui-même Cette seule différence est ce qui rend l'effet possible.
Voici le bloc complet que le générateur produit pour son préréglage Frosted :
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
Six lignes, et chacune a un travail.
filtre vs fond-filtre : quelle est la différence ?
filter modifie la façon dont l'élément lui-même est dessiné, y compris son texte et ses enfants. backdrop-filter modifie ce qui apparaît à travers l'élément par derrière et laisse l'élément & #39 ; son propre contenu net.
| Propriété | Ce qu'il affecte | Résultat de l'exemple flou | Usage typique |
|---|---|---|---|
filter: blur(10px) |
L'élément et tous ses enfants | La carte et son texte sont flous | Effets d'image, états désactivés, chargement des espaces réservés |
backdrop-filter: blur(10px) |
Tout ce qui est peint derrière l'élément | La carte reste nette, l'arrière-plan vu à travers elle est flou | Panneaux de verre dépoli, en-têtes flous, superpositions modales |
Si vous brouillez une carte avec filter et se demander pourquoi le cap est illisible, vous avez utilisé la mauvaise propriété Le Générateur de filtres CSS couvre le filter côté de la paire.
Comment fonctionne chaque ligne du verre CSS ?
Le fond est la teinte, et son canal alpha est le nombre le plus important dans le bloc. rgba(255, 255, 255, 0.2) est blanc à 20 % d'opacité A un alpha de 1 le panneau est solide et rien ne transparaît, donc le flou de fond est invisible A un alpha de 0 il n'y a pas de surface du tout Le verre le plus utilisable se situe entre 0,1 et 0,4.
Dans le générateur, il s'agit du curseur Transparence, et la dénomination nécessite une note : le curseur définit l'opacité du remplissage, donc une valeur de Transparence plus élevée rend le panneau plus solide. Transparence 20 % écrit un alpha de 0,2 et 40 % écrit 0,4.
Le filtre de fond fait le glaçage. blur(10px) définit le rayon du flou appliqué à ce qui se trouve derrière. saturate(120%) augmente la couleur de cette toile de fond floue de 20 %, ce qui contrecarre l'aspect gris et délavé que le flou plus une teinte blanche ont tendance à produire. Le curseur Generator' ; s Blur va de 0 à 40 px et la saturation de 100 % à 200 %.
La copie préfixée existe parce que les anciennes versions de Safari ne comprennent que -webkit-backdrop-filter. Écrire les deux lignes avec des valeurs identiques ne coûte rien et couvre ces versions.
Le rayon de la frontière arrondit les coins, de 0 à 50 px dans le générateur Le flou est clipsé à la forme arrondie.
La frontière est une ligne 1 px de blanc à 18 % d'opacité Il attire l'œil comme un point fort sur le bord de verre et compte le plus sur les fonds plus sombres, où la limite du panneau se dissoudrait autrement Le générateur' ; s Border coche l'allume ou l'éteint ; la couleur et la largeur sont fixes.
L'ombre 0 8px 32px rgba(0, 0, 0, 0.12) est une ombre portée large et faible qui sépare le panneau de la page Si vous voulez l'accorder, le guide d'ombre de boîte explique offset, flou et étalement en profondeur.
Que produisent les préréglages du générateur ?
Les préréglages sont des points de départ plutôt que des conceptions finies Tous les cinq utilisent un rayon de 16 px, et tous sauf Subtle incluent la bordure.
| Préréglé | fond | Filtre de backdrop | Frontière | Mieux vaut |
|---|---|---|---|---|
| Givré | rgba(255, 255, 255, 0.2) |
blur(10px) saturate(120%) |
Sur | Gradients et photos colorés |
| Lumière | rgba(255, 255, 255, 0.35) |
blur(6px) saturate(130%) |
Sur | Images occupées où le texte a besoin de plus de soutien |
| Sombre | rgba(15, 23, 42, 0.25) |
blur(12px) saturate(120%) |
Sur | Photos légères, texte blanc |
| Vibrant | rgba(139, 92, 246, 0.15) |
blur(16px) saturate(180%) |
Sur | Sections de héros sombres ou saturées |
| Subtil | rgba(255, 255, 255, 0.12) |
blur(4px) saturate(120%) |
Off | Petites puces et badges |
Le générateur se charge avec Frosted selected Cliquez sur un préréglage, ajustez les curseurs et la couleur de teinte, et le bloc de code se met à jour pendant que vous faites glisser.
Pourquoi mon filtre de fond ne fonctionne-t-il pas ?
Lorsque le flou semble ne rien faire, l’un d’eux en est presque toujours la cause.
- Le fond est opaque. Un solide
background: #fffou un alpha de 1 cache complètement la toile de fond Baissez l'alpha. - Il n'y a rien derrière pour s'estomper. Sur une page plate en une seule couleur, une couleur plate floue semble identique à la couleur plate Le verre a besoin d'un dégradé, d'une photo ou de formes derrière lui Le générateur' ; s aperçu se trouve délibérément sur un dégradé avec des cercles colorés pour cette raison ; le Guide de gradient CSS est une bonne source d'arrière-plans qui montrent bien l'effet.
- Le préfixe est manquant. Les anciennes versions de Safari ignorent la propriété non préfixée.
- Un ancêtre limite ce que le filtre peut voir. Dans la spécification actuelle Filter Effects, certaines propriétés sur un ancêtre, comme la sienne
filter, unopacityen dessous de 1 ou d'un autrebackdrop-filter« , démarrez une nouvelle racine de fond, et le flou n'échantillonne que le contenu à l'intérieur de cette racine. Si le verre se trouve à l'intérieur d'un emballage avec l'un d'eux, déplacez l'effet ou la propriété. ». - Le panneau n'a pas de taille ou est entièrement transparent d'une autre manière. Un élément de hauteur nulle ou
opacity: 0sur le panneau se cache l'effet avec le panneau.
Comment garder le texte lisible sur un panneau de verre ?
Le verre lisible demande plus de travail que toute autre partie du style, car la couleur du texte est fixe alors que l'arrière-plan sous le panneau ne l'est pas minimum de contraste WCAG 2.2 demande un rapport d'au moins 4,5 :1 pour le texte normal et de 3 :1 pour le grand texte Sur un panneau translucide ce rapport dépend de ce qui se trouve derrière chaque partie du panneau à ce moment.
Un exemple travaillé rend ce béton Le rapport de contraste est calculé à partir de la luminance relative des deux couleurs, (L1 + 0,05) /(L2 + 0,05).Un matériau de remplissage en verre composite sur le fond : chaque canal devient alpha fois le remplissage plus (1 moins alpha) fois le fond Le flou fait la moyenne des pixels voisins mais laisse une région et n°39 ; c'est à peu près là où il se trouvait, donc sur une grande surface d'une couleur, le composite est une estimation juste.
| Remplir | Couleur du fond | Couleur composite | Contraste avec le texte blanc |
|---|---|---|---|
| Givré, blanc à 0,2 | Bleu #60A5FA |
à propos rgb(128, 183, 251) |
environ 2,1:1 |
| Givré, blanc à 0,2 | Jaune #FBBF24 |
à propos rgb(252, 204, 80) |
environ 1,5:1 |
Sombre, rgba(15, 23, 42, 0.25) |
Bleu #60A5FA |
à propos rgb(76, 130, 198) |
environ 4,0 :1 |
Prenez la première ligne Le rouge vaut 0,2 x 255 + 0,8 x 96 = 127,8, le vert vaut 0,2 x 255 + 0,8 x 165 = 183, le bleu vaut 0,2 x 255 + 0,8 x 250 = 251. Cette couleur' ; sa luminance relative s'établit près de 0,454, et le blanc' ; s vaut 1, donc le rapport est de 1,05/0,504, environ 2,1 :1. La même partie du panneau passe encore au-dessus du corps court :1.
Les correctifs pratiques, par ordre d'efficacité :
- Augmentez l'alpha de remplissage. Déplacer la transparence de 20 % à 40 % cache une plus grande partie de la toile de fond et réduit la plage sur laquelle le contraste oscille.
- Assombrir la teinte pour un texte léger(ou éclaircissez-le pour un texte sombre.) Le verre foncé avec un texte blanc tient le coup sur beaucoup plus de fonds que le verre blanc avec un texte blanc.
- Augmenter le flou. Il lisse les détails à contraste élevé, de sorte qu'une fine ligne blanche derrière une lettre ne la traverse pas.
- Ajouter une ombre de texte en dernier recours pour les rubriques. Le générateur d'ombres textuelles fait un doux rapidement.
- Tester aux extrêmes. Vérifiez le contraste sur les régions les plus brillantes et les plus sombres sur lesquelles le panneau peut reposer, avec le vérificateur de contraste de couleurs« , pas à un endroit pratique ».
Le CSS copié par Generator' ;s couvre uniquement la surface du verre Le texte blanc dans son aperçu ne fait pas partie de la sortie, donc défini color sur votre élément vous-même.
Le filtre de toile de fond nuit-il aux performances ?
Il peut. Un flou de fond oblige le navigateur à lire les pixels derrière l'élément et à exécuter un flou sur eux chaque fois que cette zone change Sur une carte statique qui est bon marché Sur une grande zone, pendant le défilement, ou lorsque le contenu s'anime derrière le panneau, c'est l'un des effets les plus chers pour le composite, et les téléphones de moindre puissance le montrent d'abord comme des images abandonnées.
Des lignes directrices qui le maintiennent sous contrôle :
- Gardez les panneaux de verre de taille modeste Une superposition givrée avec une pleine fenêtre coûte bien plus cher qu'une carte.
- Préférez des rayons de flou plus petits Le coût augmente avec le rayon, et au-delà d'environ 20 px la différence visuelle est faible.
- Évitez d'animer la valeur du flou elle-même Animer
opacityoutransformdu panneau à la place. - Faites attention avec des en-têtes collants sur un long contenu à défilement, qui se refleurissent sur chaque image de défilement Testez sur un vrai téléphone de milieu de gamme.
Comment ajouter une solution de repli pour les navigateurs ou les utilisateurs qui en ont besoin ?
Les versions actuelles de Chrome, Edge, Firefox et Safari prennent toutes en charge backdrop-filter. Les très anciens navigateurs l'ignorent et montrent le remplissage semi-transparent sans le flou, qui à faible alpha peut laisser du texte sur un fond occupé Deux petits ajouts font que l'effet se dégrade bien Vous pouvez vérifier le tableau de support actuel sur MDN' ;s page de filtre de toile de fond.
.glass {
/* Fallback: a more solid fill for browsers without backdrop-filter */
background: rgba(255, 255, 255, 0.7);
border-radius: 16px;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
}
@media (prefers-reduced-transparency: reduce) {
.glass {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
le @supports le bloc n'applique que la version translucide où le flou existe Le prefers-reduced-transparency fonctionnalité multimédia, définie dans Requêtes médias Niveau 5« , permet aux utilisateurs qui ont demandé moins de transparence à leur système d'exploitation d'obtenir un panneau solide. La prise en charge par le navigateur de cette fonctionnalité multimédia est encore partielle, alors traitez-la comme une amélioration lorsqu'elle est disponible plutôt que comme la seule garantie. ».
Glassmorphisme vs neumorphisme vs design plat
Le glassmorphisme est l'un des nombreux styles de surface et chacun a un coût différent.
| Style | Comment la surface est faite | Css principal | arrogance | Risque principal |
|---|---|---|---|---|
| Glassmorphisme | Remplissage translucide plus flou de toile de fond | background avec alpha, backdrop-filter |
Profondeur et contexte du fond | Le contraste varie, le flou coûte la performance |
| Neumorphisme | Même couleur que la page, surélevée ou pressée par des ombres appariées | Deux box-shadow couches |
Contrôles doux et tactiles | Contraste très faible entre contrôle et page |
| Plat | Remplissages solides, pas de profondeur | background |
Rapide et prévisible | Peut se sentir simple |
| Élévation de style matériel | Remplissage solide avec niveaux de profondeur d'ombre | box-shadow |
Hiérarchie claire | Moins atmosphérique |
Si le look doux et extrudé est plus proche de ce que vous voulez, le générateur de neumorphisme construit les ombres appariées De nombreuses interfaces mélangent les styles : verre pour une barre de navigation flottante sur une image de héros, cartes plates pour un contenu dense en dessous.
Comment construire une carte en verre, du début à la fin
- Ouvrez le générateur CSS en verre dépoli et choisissez le préréglage le plus proche de votre arrière-plan : Sombre pour les photos claires, Givré ou Lumière pour les dégradés colorés.
- Définissez Blur suffisamment haut pour que les détails de l'arrière-plan ne soient pas en concurrence avec le texte, généralement de 8 à 16 px.
- Définissez Transparence. Commencez à 20 % et augmentez-le jusqu'à ce que votre texte passe le contraste sur la partie la plus dure de l'arrière-plan.
- Choisissez une teinte avec le sélecteur de couleurs Une teinte dessinée à partir de l'arrière-plan' ; sa propre palette semble plus naturelle que le blanc pur.
- Ajustez Radius pour qu'il corresponde au reste de vos composants et maintenez Border allumé pour les arrière-plans sombres.
- Cliquez sur Copier CSS et collez le bloc sur votre classe de carte Ajouter
coloret se rembourrer. - Enroulez le bloc dans le
@supportsrepli ci-dessus si vous prenez en charge les anciens navigateurs.
Tout dans le générateur fonctionne dans votre navigateur, donc rien n'est téléchargé et il continue de fonctionner hors ligne après le chargement de la page Pour les outils de surface et d'effet associés, le Hub d'outils CSS répertorie les gradients, les ombres, les filtres et les transitions en un seul endroit.
