Générateur de Glassmorphism CSS

Contrôles

25%
12px
180%
30%
16px

Aperçu

Glassmorphism

Frosted glass effect using CSS backdrop-filter

Sortie CSS

 
  
 
 
   
 
 
 
Comment l'utiliser
 
     
  1. Définissez l'arrière-plan — Choisissez une couleur et ajustez l'opacité pour la teinte du verre.
    2.  
  2. Contrôlez le flou — Des valeurs plus élevées créent un effet dépoli plus marqué.
    3.  
  3. Réglez la saturation — Renforcez les couleurs derrière le verre pour plus d'éclat.
    4.  
  4. Ajoutez une bordure — Une bordure semi-transparente définit le bord du verre.
    5.  
  5. Copiez & collez — Cliquez sur « Copier le CSS » pour la règle glassmorphism complète.
    6.  
 
 
 
Qu'est-ce que le glassmorphism ?
 
Le glassmorphism est une tendance de design d'interface qui crée des effets de verre dépoli avec la propriété CSS backdrop-filter. Les éléments paraissent translucides, floutant le contenu derrière eux.
 
Propriétés clés : background semi-transparent, backdrop-filter: blur(), border subtile et box-shadow douce. Fonctionne dans Chrome, Edge, Safari et Firefox.
 
 
 
Cas d'usage courants
 
 
Barres de navigation
 
Superpositions modales
 
Composants de cartes
 
Panneaux latéraux
 
Formulaires de connexion
 
Notifications toast
 
 
Conseils & bonnes pratiques
 
 
 Arrière-plans colorés 
Le glassmorphism rend mieux sur des arrière-plans colorés ou en image. Sur du blanc uni, l'effet est à peine visible.
 
 
 Gardez une opacité faible 
10 à 30 % d'opacité d'arrière-plan donne le meilleur rendu verre. Trop élevé, cela ressemble à un panneau opaque.
 
 
 Préfixe Safari 
Incluez toujours -webkit-backdrop-filter aux côtés de backdrop-filter pour la prise en charge Safari.
 
 
 Solution de repli 
Sur les navigateurs non pris en charge, l'arrière-plan semi-transparent reste correct même sans le flou.
 
 
 
Questions fréquentes
 
 
backdrop-filter fonctionne-t-il dans tous les navigateurs ?
 
Oui en 2026. Chrome, Edge, Safari et Firefox le prennent tous en charge. Safari nécessite le préfixe -webkit-.
 
 
 
Le glassmorphism nuit-il aux performances ?
 
backdrop-filter est accéléré par le GPU mais peut être coûteux avec de grandes valeurs de flou sur de nombreux éléments superposés. À utiliser avec parcimonie sur mobile.
 
 
 
Puis-je animer le flou ?
 
Oui. backdrop-filter est animable. Faites une transition de blur(0) à blur(12px) pour des effets d'apparition.
 
 
 
Quelle différence entre filter et backdrop-filter ?
 
filter applique les effets à l'élément lui-même. backdrop-filter applique les effets à la zone située derrière l'élément.