Le principe du glassmorphism

Le glassmorphism repose sur trois propriétés CSS combinées pour simuler du verre dépoli devant un fond coloré :

  • backdrop-filter: blur() — floute le contenu derrière l'élément
  • background: rgba() — fond semi-transparent laissant apparaître le flou
  • border: rgba() semi-transparent — bordure légère pour l'effet de profondeur

La propriété clé est backdrop-filter, qui applique des filtres au contenu situé derrière l'élément — contrairement à filter qui s'applique à l'élément lui-même.

Implémentation CSS

La recette de base

.glass-card {
  /* Fond semi-transparent */
  background: rgba(255, 255, 255, 0.08);

  /* L'effet verre dépoli */
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%); /* Safari */

  /* Bordure lumineuse subtile */
  border: 1px solid rgba(255, 255, 255, 0.12);

  /* Reflet supérieur (optionnel) */
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);

  border-radius: 20px;
}

Variante dark theme (palette Kito Digital)

.glass-dark {
  background: rgba(17, 24, 39, 0.75);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(124, 92, 255, 0.20);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.45),
    0 0 30px rgba(124, 92, 255, 0.15);
  border-radius: 20px;
  position: relative; /* Requis pour le ::after */
}

/* Liseré lumineux en haut */
.glass-dark::after {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(
    90deg, transparent, #7C5CFF, #2EE5FF, transparent
  );
  opacity: 0.8;
}
Règle fondamentale : Le glassmorphism ne fonctionne visuellement que si le fond derrière l'élément est suffisamment coloré ou contrasté. Sur un fond blanc uni, l'effet est invisible.

L'axe saturation

Combiner blur() avec saturate() amplifie l'effet. Les valeurs recommandées :

/* Effet subtil */
backdrop-filter: blur(12px) saturate(150%);

/* Effet standard */
backdrop-filter: blur(20px) saturate(180%);

/* Effet prononcé */
backdrop-filter: blur(32px) saturate(200%) brightness(1.05);

Fallbacks navigateurs

backdrop-filter est supporté par tous les navigateurs modernes, mais une vérification avec @supports reste une bonne pratique pour les anciens navigateurs et les appareils bas de gamme :

.glass-card {
  /* Fallback : fond opaque simple */
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
}

/* Enhancement si backdrop-filter supporté */
@supports (backdrop-filter: blur(1px)) or
          (-webkit-backdrop-filter: blur(1px)) {
  .glass-card {
    background: rgba(17, 24, 39, 0.75);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
  }
}

Accessibilité et lisibilité

Le piège classique du glassmorphism est de sacrifier la lisibilité du texte sur l'autel de l'esthétique. Les contraintes WCAG 2.1 s'appliquent toujours :

  • Contraste texte / fond minimum : 4.5:1 pour le texte normal, 3:1 pour le grand texte.
  • Évitez de placer du texte sur des zones du fond très colorées sans assombrir le fond de la card.
  • Respectez prefers-reduced-motion pour les animations d'entrée des cards.
/* Respecter les préférences utilisateur */
@media (prefers-reduced-motion: reduce) {
  .glass-card {
    animation: none;
    transition: none;
  }
}

/* Texte toujours lisible */
.glass-card p {
  color: #EAF0FF; /* Blanc cassé — contraste élevé */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* Ombre légère */
}

Impact sur les performances

backdrop-filter est coûteux en rendu GPU. Pour préserver les performances :

  • Limitez le nombre d'éléments avec backdrop-filter sur une même page (idéalement < 5).
  • Utilisez will-change: transform uniquement sur les éléments animés, pas sur tous.
  • Évitez backdrop-filter sur des éléments couvrant toute la page (navigation full-screen, modales larges).
  • Sur mobile, réduisez l'intensité du blur : blur(16px) plutôt que blur(24px).
/* Mobile : blur réduit pour les performances */
@media (max-width: 768px) {
  .glass-card {
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
  }
}

Exemples concrets

Navigation sticky glassmorphism

.nav-glass {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7, 10, 18, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.3s ease;
}

/* Effet renforcé au scroll */
.nav-glass.scrolled {
  background: rgba(7, 10, 18, 0.95);
}

Modal / Dialog glassmorphism

.modal-glass {
  background: rgba(11, 16, 32, 0.90);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  border: 1px solid rgba(124, 92, 255, 0.25);
  border-radius: 24px;
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.6),
    0 0 50px rgba(124, 92, 255, 0.1);
  padding: 2.5rem;
}