CSS Glassmorphism en 2025 : la bonne façon de l’implémenter

La plupart des tutoriels en ligne datent de 2021. Voici ce qui a changé et ce que vous faites mal.

9 min de lecture backdrop-filter WCAG 2.1

Le glassmorphism a explosé en 2021 grâce à un tutoriel Figma et au redesign de macOS Big Sur. Quatre ans plus tard, backdrop-filter atteint 96 % de support mondial, mais les articles qui se classent sur la requête sont toujours les mêmes — datés, aveugles aux performances et sourds à l’accessibilité. Ce guide comble le vide.

backdrop-filter vs filter

.glass-card {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

WCAG

.glass-card p {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

Performance

@media (prefers-reduced-motion: reduce) {
  .glass-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.85);
  }
}
Outil gratuit Vérificateur de Contraste Vérifiez la conformité WCAG AA / AAA pour toute paire de couleurs

Progressive Fallback

.glass-card {
  background: rgba(30, 30, 30, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
}

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

@media (prefers-reduced-motion: reduce) {
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .glass-card {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background: rgba(30, 30, 30, 0.88);
    }
  }
}

Dark Mode

.glass-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}

@media (prefers-color-scheme: light) {
  .glass-card {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
  }
}
Outil gratuit Générateur Glassmorphism Créez des cartes verre avec backdrop-filter, fallback @supports et aperçu

Quand NE PAS utiliser le glassmorphism

Ouvrir le générateur

Outil gratuit Générateur Box Shadow Ajustez les paramètres et copiez le CSS prêt à l'emploi

CSS Glassmorphism en 2025 : support navigateur, performance, accessibilité

Le glassmorphism CSS repose sur la propriété backdrop-filter, qui a atteint un support cross-browser complet en 2023. En 2025, le support mondial est d’environ 96 %. Firefox a ajouté le support dans la version 103 (2022), rendant les polyfills JavaScript inutiles.

Questions fréquentes

Quelle est la différence entre backdrop-filter et filter en CSS ?+
backdrop-filter applique des effets à la zone derrière un élément sans affecter son propre contenu. filter agit sur l’élément lui-même. Pour le glassmorphism, toujours utiliser backdrop-filter : filter: blur() sur la carte flou le texte de la carte.
Firefox supporte-t-il backdrop-filter en 2025 ?+
Oui. Firefox a ajouté le support dans la version 103 (juillet 2022). En 2025, il est entièrement supporté dans Chrome 76+, Firefox 103+, Safari 9+ (avec préfixe -webkit-), Edge 17+.
Pourquoi ma glass card est-elle laide sur mobile ?+
Deux raisons courantes : la performance — des rayons de flou élevés (au-dessus de 16–20 px) peuvent causer des chutes de framerate sur Android milieu de gamme. Le contraste — sur écrans mobiles lumineux, une glass card à faible alpha peut rendre le texte illisible.
Comment rendre le glassmorphism accessible ?+
Le problème principal est le contraste du texte. WCAG 2.1 AA exige 4.5:1. Solutions : ajouter un text-shadow, donner au texte un fond semi-opaque sombre, ou contrôler le fond derrière la card. Respecter aussi prefers-reduced-motion.
Quel rayon de flou utiliser pour le glassmorphism ?+
La plage la plus courante en production est 8–16 px. En dessous de 8 px, l’effet frost est à peine visible. Au-dessus de 20 px, l’effet est dramatique mais coûteux. Pour le mobile, limiter à 10–12 px.
Comment écrire un fallback pour les navigateurs sans backdrop-filter ?+
Utiliser la règle @supports avec progressive enhancement : définir un fond solide et quasi-opaque comme style de base, puis surcharger avec le fond translucide et le filtre blur dans @supports.
Le glassmorphism est-il encore pertinent en 2025 ?+
Oui — il est passé de tendance à motif UI standard pour des contextes spécifiques. Apple, Microsoft et Google utilisent des effets de verre dépoli dans leurs interfaces OS. L’enthousiasme de 2021 a cédé la place à une utilisation plus intentionnelle.