Préréglages
Verre
background: rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
Ce que ça fait
Crée du CSS verre dépoli (glassmorphism) — backdrop-blur, un arrière-plan translucide, une bordure subtile et une ombre douce. Ajustez le flou, l’opacité, la teinte, le rayon, la bordure et la saturation, prévisualisez en direct et copiez le bloc de déclaration complet. 100 % côté client.
Comment l’utiliser
- Ajustez les curseurs : Blur, Opacity, Border, Radius, Saturation.
- Choisissez une couleur de Tint.
- Copy le CSS.
Exemples
Flou 12, opacité 0.6, teinte blanche, rayon 16 →
background: rgba(255, 255, 255, 0.6);
-webkit-backdrop-filter: blur(12px) saturate(180%);
backdrop-filter: blur(12px) saturate(180%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);Bon à savoir
- Privé : la génération est locale.
backdrop-filternécessite un arrière-plan coloré ou une image derrière l’élément pour que l’effet soit visible.- Outils liés : Box-Shadow Generator, CSS Gradient Generator.