Générateur de Glassmorphism CSS — Effet Verre Dépoli

Générateur de Glassmorphism CSS — Concevez l’Effet Verre Dépoli

Créez de superbes effets d’interface glassmorphism (verre dépoli) avec un éditeur visuel en direct. Ajustez le flou, la transparence, la saturation, la bordure et le rayon des coins, regardez le résultat se mettre à jour instantanément sur un fond coloré, et copiez le CSS prêt à l’emploi. Le look verre dépoli popularisé par iOS, macOS Big Sur et Windows 11 est désormais à un clic.

Qu’est-ce que le glassmorphism ?

Le glassmorphism est un style de design où les éléments d’interface ressemblent à du verre dépoli : un fond semi-transparent avec un flou appliqué à ce qui se trouve derrière, une bordure claire subtile, et une ombre douce. La propriété CSS clé est backdrop-filter: blur(), qui floute le contenu derrière l’élément plutôt que l’élément lui-même.

Les contrôles

• Flou : l’intensité du flou appliqué au fond derrière la carte (le cœur de l’effet)
• Transparence : l’opacité de la teinte du verre — plus elle est basse, plus le fond transparaît
• Saturation : renforce les couleurs derrière le verre pour un rendu plus riche
• Rayon de bordure : arrondit les coins de la carte
• Épaisseur de bordure : une fine bordure claire ajoute le bord de verre réaliste
• Teinte + mode sombre : décalez le verre vers une couleur, ou passez à une variante de verre sombre

Important : support de backdrop-filter

• L’effet repose sur backdrop-filter, supporté par tous les navigateurs modernes
• Le générateur inclut le préfixe -webkit-backdrop-filter pour Safari
• L’élément doit se trouver au-dessus d’un contenu ou d’un fond — il n’y a rien à flouter sur une page blanche
• Évitez le sur-floutage ; 8 à 16px rendent généralement le mieux

Conseils de design

• Le glassmorphism brille sur des dégradés colorés ou des photos — essayez les fonds prédéfinis
• Gardez un texte très contrasté pour qu’il reste lisible sur le flou
• Utilisez-le avec parcimonie pour des cartes, barres de navigation ou modales — pas des pages entières

Confidentialité

Cet outil fonctionne entièrement dans votre navigateur. Rien n’est envoyé ni stocké.