Qu’est-ce que le glassmorphism ?

Un style visuel où un panneau translucide floute ce qui se trouve derrière lui, comme du verre dépoli, généralement avec une fine bordure claire et une ombre douce. En CSS, il combine un arrière-plan semi-transparent et backdrop-filter: blur().

Pourquoi mon panneau de verre n’est-il pas flouté ?

backdrop-filter n’agit que sur le contenu situé derrière l’élément : celui-ci doit donc avoir un arrière-plan transparent ou semi-transparent et quelque chose de visible derrière lui. Un arrière-plan entièrement opaque masque l’effet.

Quels navigateurs prennent en charge backdrop-filter ?

Les versions actuelles de Chrome, Edge, Firefox et Safari le prennent en charge. Les versions de Safari antérieures à 18 nécessitent le préfixe -webkit-, que le CSS exporté inclut.

Générateur de glassmorphism

Créez des panneaux en verre dépoli avec backdrop-filter. Réglez le flou, la transparence, la saturation et la bordure sur un arrière-plan en direct, puis copiez le CSS.

Aperçu en direct

Verre dépoli

Le texte sur du verre doit être suffisamment contrasté sur toutes les parties de l’arrière-plan.

L’arrière-plan sert uniquement à l’aperçu et n’est pas exporté.

.glass {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.25);
}

Tout reste dans votre navigateur.

Références des formats

MDN — backdrop-filter
W3C — WCAG 2.2 contrast (minimum)

Page de l’outil mise à jour le : 2026-10-25

Aperçu en direct

Guide et exemple

Outils associés

Références des formats