Générateur Glassmorphism CSS
Créez des effets UI spectaculaires façon verre avec backdrop-filter et transparence.
① Ajustez flou et opacité ② Choisissez couleur et bord ③ Copiez le CSS
Glassmorphism
backdrop-filter: blur(12px)
Presets:
12px
18%
180%
30%
16px
Code CSS
.glass {
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 16px;
}Qu'est-ce que le Glassmorphism ?
Le glassmorphism est une tendance UI qui crée un aspect verre dépoli avec CSS backdrop-filter, des arrière-plans semi-transparents et des bordures subtiles. Propriétés clés : backdrop-filter: blur(12px) saturate(180%) floute l'arrière-plan. background: rgba(255,255,255,0.18) définit le remplissage translucide. border: 1px solid rgba(255,255,255,0.3) ajoute le bord de verre. Safari nécessite -webkit-backdrop-filter. Incluez toujours un fallback @supports pour les navigateurs plus anciens.
Questions Fréquentes
Le glassmorphism est un style UI qui simule le verre dépoli avec CSS backdrop-filter avec flou, arrière-plans colorés semi-transparents et bordures translucides fines.
Les propriétés clés : backdrop-filter: blur(10px), background: rgba(255,255,255,0.15), border: 1px solid rgba(255,255,255,0.3).
backdrop-filter est supporté dans Chrome, Firefox 103+, Edge et Safari (avec préfixe -webkit-). Incluez toujours les deux versions pour une compatibilité maximale.
Utilisez @supports : @supports not (backdrop-filter: blur(1px)) { .glass { background: rgba(255,255,255,0.9); } }
Le glassmorphism nécessite du contenu DERRIÈRE l'élément de verre. Placez l'élément sur une image ou un dégradé pour voir l'effet.
Des valeurs entre 8px et 20px créent l'aspect verre le plus naturel. 10–16px est le point optimal commun.
Ajoutez box-shadow : box-shadow: 0 8px 32px rgba(0,0,0,0.15). Combinez des ombres internes (inset) avec externes pour un effet de panneau de verre convaincant.