Générateur CSS de glassmorphism, gratuit

Qu'est-ce que le glassmorphism ?

Le glassmorphism est une tendance de design d'interface qui met en avant des éléments de type verre dépoli laissant transparaître l'arrière-plan à travers un effet de flou. Il utilise la propriété CSS backdrop-filter: blur(), des arrière-plans semi-transparents et des bordures subtiles pour un rendu moderne et en couches. Il est populaire dans les interfaces de tableaux de bord, les cartes et les modales.

Compatibilité des navigateurs

backdrop-filter est pris en charge par tous les navigateurs modernes : Chrome, Edge, Safari et Firefox 103+. Pour les versions plus anciennes de Firefox, prévoyez une couleur d'arrière-plan unie en repli.

Comment ça marche

1. Choisissez une couleur d'arrière-plan. Le verre a besoin de quelque chose derrière lui pour être visible. Choisissez un fond uni, un dégradé ou une photo pour la zone d'aperçu, afin de juger comment le flou se lira dans votre vraie mise en page.
2. Réglez le flou et la saturation. Le rayon de flou simule la diffusion de la lumière du verre dépoli ; la saturation fait ressortir les couleurs situées derrière le panneau. La recette classique façon Apple est d'environ blur(10px) saturate(180%).
3. Ajustez la couleur et la transparence du verre. Le fond propre de l'élément doit être partiellement transparent : une couleur opaque bloque entièrement l'arrière-plan. Du blanc ou du noir à 10-30 % d'alpha est le point de départ typique.
4. Ajustez la bordure et le rayon des coins. Une bordure blanche très fine à faible alpha imite le reflet du bord intérieur du verre physique. Un border-radius d'environ 12-20px donne l'aspect de carte douce qu'utilisent la plupart des designs glassmorphism.
5. Copiez le CSS. Collez le bloc de propriétés généré dans votre feuille de style. Ajoutez la ligne compagne -webkit-backdrop-filter si vous devez prendre en charge les anciennes versions de Safari.

D'où vient le terme

Le visuel est plus ancien que l'étiquette. Apple a introduit des arrière-plans floutés en temps réel pour les panneaux de notification et le Centre de contrôle avec iOS 7 en 2013, et l'a apporté au bureau avec macOS Yosemite l'année suivante ; l'équipe WebKit a livré la propriété CSS backdrop-filter en août 2015, précisément parce que, comme le dit son billet de lancement, « le langage de conception d'interface utilisateur d'iOS 7 et d'OS X Yosemite a changé pour intégrer de superbes effets de flou d'arrière-plan ». L'ancien « Aero Glass » de Windows Vista (2007) chez Microsoft était la même idée, et Microsoft documente deux matériaux apparentés dans le système Fluent moderne : Acrylic (translucide, flouté, avec une superposition de bruit) et Mica (une variante opaque teintée par le bureau introduite avec Windows 11). Le nom unique « glassmorphism » a été inventé par le designer polonais Michał Malewicz de Hype4 Academy en novembre 2020, en phase avec la sortie de macOS Big Sur : la cohérence de nommage, dans la même famille que le « neumorphism » antérieur, a donné aux designers un vocabulaire commun pour discuter de la technique.

La recette CSS

.glass-card {
  /* 1. Element background: must be partially transparent */
  background: rgba(255, 255, 255, 0.18);

  /* 2. The frosted-glass effect */
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%); /* Safari 9-16 */

  /* 3. The inner-edge highlight */
  border: 1px solid rgba(255, 255, 255, 0.3);

  /* 4. Soft corners */
  border-radius: 16px;
}

Trois choses à intégrer à propos de la recette. Premièrement, le fond propre de l'élément doit être transparent ou partiellement transparent ; MDN le dit clairement : « L'élément ou son fond doit être transparent ou partiellement transparent pour que l'effet soit visible. » Un background-color entièrement opaque recouvre l'échantillon flouté et l'utilisateur voit un panneau plat. Deuxièmement, l'effet a besoin de quelque chose derrière lui à flouter : le glassmorphism ne fonctionne pas sur une page blanche uniforme. Troisièmement, le Safari moderne accepte la propriété sans préfixe, mais tout ce qui est antérieur à Safari 17 a besoin à la fois de backdrop-filter et de son jumeau -webkit-backdrop-filter.

Les dix fonctions de filtre

backdrop-filter est défini dans le W3C Filter Effects Module Level 2 et accepte les mêmes dix fonctions de filtre que la propriété filter ordinaire : blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate() et sepia(). Elles peuvent être chaînées, et l'ordre compte : elles sont appliquées de gauche à droite sur l'échantillon d'arrière-plan. Pour le glassmorphism, blur() plus saturate() couvre l'aspect canonique ; tout le reste relève du réglage créatif (p. ex. brightness(105%) sur des arrière-plans sombres pour éclaircir l'échantillon flouté, ou contrast(120%) pour garder des relations de couleur nettes).

Prise en charge des navigateurs et le préfixe -webkit-

En 2026, la propriété est prise en charge par tous les navigateurs evergreen. WebKit a été le premier à la livrer le 10 août 2015 avec Safari 9 / iOS 9, derrière le préfixe -webkit-backdrop-filter. Chrome a ajouté la prise en charge sans préfixe à la version 76 (juillet 2019), Edge a suivi avec le passage à Chromium à la version 79, et Firefox 103 l'a activée sans drapeau le 26 juillet 2022. MDN signale la propriété comme Baseline 2024 (nouvellement disponible depuis septembre 2024), ce qui signifie que les quatre principaux moteurs interopèrent désormais. La prise en charge dans le monde réel est d'environ 95 % à l'échelle mondiale. Pour couvrir les anciennes versions de Safari (et les utilisateurs de PostCSS), incluez côte à côte les déclarations avec et sans préfixe, ou laissez autoprefixer ajouter le préfixe à partir de votre configuration Browserslist.

Un repli pour les navigateurs qui ne la prennent pas en charge

Utilisez une requête @supports pour que les navigateurs non compatibles obtiennent un repli solide plutôt qu'un panneau transparent illisible :

.glass-card {
  background: rgba(30, 41, 59, 0.92); /* opaque fallback */
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-card {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
  }
}

Performance : quand l'utiliser (et quand non)

backdrop-filter est accéléré par le GPU, mais ce n'est pas gratuit. Chaque surface filtrée force le navigateur à maintenir une couche de composition distincte et à rééchantillonner la zone derrière l'élément. Le brouillon d'éditeur du W3C le reconnaît directement, signalant que des filtres d'arrière-plan imbriqués ou empilés peuvent provoquer « des passes de rendu exponentielles », et le billet de lancement de WebKit avertit que la propriété « force le moteur à effectuer plus de passes de rendu, ce qui aura un impact sur les performances ». Le résumé laconique de Web.dev s'applique : « backdrop-filter peut nuire aux performances. Testez-le avant de déployer. »

Règles pratiques : gardez les rayons de flou sous ~20px dans le code de production, évitez les surfaces de verre en pleine fenêtre (une barre de navigation en verre qui se repeint à chaque défilement est le coupable classique), n'empilez pas de nombreuses surfaces filtrées les unes sur les autres, et évitez backdrop-filter sur les éléments <video> où le flou doit être recalculé à chaque image. Microsoft dit à peu près la même chose aux utilisateurs d'Acrylic dans la documentation Fluent : « Les effets Acrylic sont automatiquement désactivés quand un appareil entre en mode Économiseur de batterie. »

Accessibilité : le piège du contraste

Le glassmorphism abaisse par définition le contraste entre le texte et son arrière-plan, parce que l'« arrière-plan » sous le panneau est désormais tout ce qui se trouve derrière, et cela varie à mesure que l'utilisateur défile ou change de fond d'écran. Les minimums WCAG 2.1 pertinents (4,5:1 pour le texte courant normal, 3:1 pour le texte grand ou gras) doivent être respectés sur l'arrière-plan le pire des cas, pas sur la moyenne. Conseil pratique : gardez le texte courant hors des panneaux de verre et utilisez-les surtout pour l'habillage (cartes, en-têtes, fenêtres modales) où la lecture réelle se fait sur une surface intérieure plus opaque. Fournissez toujours une variante de repli opaque pour les utilisateurs qui ont désactivé la transparence au niveau du système : macOS (Réglages Système → Accessibilité → Moniteur → Réduire la transparence) comme Windows (Paramètres → Personnalisation → Couleurs → Effets de transparence) exposent l'option, et CSS peut la détecter :

@media (prefers-reduced-transparency: reduce) {
  .glass-card {
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

Où le glassmorphism fonctionne bien, et où il échoue

• Bons usages : barres de navigation flottantes sur des images héroïques, cartes de tableau de bord sur un arrière-plan en dégradé coloré, boîtes de dialogue modales qui se superposent à un contenu riche, widgets façon écran de verrouillage, superpositions vidéo où l'habillage du lecteur gagne à adoucir l'image derrière lui.
• Risqué : conteneurs de texte courant (le contraste varie quand l'utilisateur défile), tableaux de données (le bruit visuel gêne le balayage des lignes), surfaces en pleine fenêtre (impact sur les performances), interfaces destinées aux utilisateurs malvoyants, sauf si elles s'accompagnent d'un repli à transparence réduite.
• À éviter : boutons d'appel à l'action principaux (la perte de contraste nuit à la conversion), panneaux d'erreur ou d'avertissement (besoin d'une lisibilité maximale), formulaires riches en texte.

Erreurs courantes

1. Oublier l'arrière-plan transparent. Définir backdrop-filter sur un élément ayant un background-color opaque ne produit aucun effet visible : la couleur opaque recouvre l'échantillon flouté. Associez-le toujours à un arrière-plan rgba()/hsla().
2. Du verre sur une couleur unie. S'il n'y a rien d'intéressant derrière le panneau, le flouter ne produit aucun « verre », juste un rectangle légèrement teinté. L'effet a besoin d'une photo, d'un dégradé ou d'un arrière-plan chargé pour se lire.
3. Sauter le préfixe -webkit-. Les anciennes versions de Safari en ont besoin. Livrez les deux lignes ou comptez sur autoprefixer.
4. Empiler trop de panneaux. Chaque surface filtrée est sa propre couche GPU. Trois ou quatre est généralement la limite pratique avant que la fréquence d'images ne chute sur mobile.
5. Échouer à la vérification de contraste dans le pire des cas. Testez le panneau sur les zones les plus claires et les plus sombres de chaque arrière-plan sur lequel il reposera, pas seulement une capture d'écran de démonstration.
6. Animer le rayon de flou. Faire une transition de backdrop-filter: blur(0) → blur(20px) au survol est techniquement autorisé, mais recalcule le flou à chaque image et est le moyen le plus simple de plomber les performances de défilement. Animez plutôt opacity ou transform et laissez le flou statique.

Foire aux questions

Pourquoi ma carte en verre ressemble-t-elle à un panneau plat ?

Le background-color propre de l'élément est entièrement opaque. backdrop-filter floute tout ce qui se trouve derrière l'élément, mais l'élément peint par-dessus. Avec un fond opaque, cette peinture recouvre l'échantillon flouté. Passez à rgba() ou hsla() à 10-30 % d'alpha, le point idéal pour la plupart des designs glassmorphism.

Fonctionnera-t-il dans Safari ?

Oui, Safari a été le premier navigateur à livrer la propriété, en août 2015. Les anciennes versions de Safari ont besoin du préfixe -webkit-backdrop-filter ; le Safari moderne accepte la forme sans préfixe. Inclure les deux fait fonctionner le même CSS sur toutes les versions de Safari encore activement utilisées.

Le glassmorphism est-il accessible ?

Seulement si vous concevez pour l'arrière-plan du pire des cas. La WCAG 2.1 exige un ratio de contraste de 4,5:1 pour le texte normal et de 3:1 pour les composants d'interface grands ou gras, mesuré sur la couleur qui finit sous le panneau. Fournissez un repli opaque sous la media query prefers-reduced-transparency pour que les utilisateurs ayant désactivé la transparence au niveau du système obtiennent une surface lisible.

Nuit-il aux performances ?

Cela peut. Chaque surface filtrée force le navigateur à conserver une couche de composition distincte et à rééchantillonner la zone derrière elle, et de grands rayons de flou ou des panneaux empilés en aggravent le coût. Gardez le rayon sous environ 20px, évitez les panneaux en pleine fenêtre, et ne le mettez pas sur <video>. Le conseil officiel de Web.dev est de tester sur un appareil d'entrée de gamme représentatif avant de livrer.

Quelle est la différence entre le glassmorphism et le neumorphism ?

Le neumorphism (inventé quelques mois plus tôt) crée l'illusion de formes en plastique souple embossées en combinant des ombres intérieures et extérieures sur la même couleur unie que l'arrière-plan de la page : aucune transparence, aucun flou. Le glassmorphism garde l'arrière-plan de la page visible à travers un panneau translucide et flouté. Ce sont des styles complémentaires plutôt que concurrents, et certains designs utilisent les deux : un bouton néomorphique sur une carte en verre, par exemple.

Puis-je copier le CSS pour un usage en production ?

Oui. La sortie est du CSS simple utilisant des propriétés standard, sans extensions propriétaires, sans JavaScript. Déposez la règle dans votre feuille de style et appliquez la classe à l'élément qui doit ressembler à du verre.

Outils associés