Generateur Glassmorphism

Créez des effets modernes de verre dépoli avec CSS backdrop-filter. Ajustez blur, transparence, bordures. 6 presets, aperçu direct, copiez du code prêt.

Apercu

Glassmorphism

L'effet de verre moderne pour un beau design UI

Intensite du flou

Transparence

Saturation

Rayon de bordure

Couleur de fond

Couleur de bordure

Opacite de bordure

Ombre

Activer l'ombre

Flou de l'ombre

Extension de l'ombre

Opacite de l'ombre

Fond du conteneur

Code CSS

Règle CSS complète + repli

Styles predefinis

Vous avez des commentaires ? Signalez des bugs, suggérez des fonctionnalités ou partagez vos idées — nous lisons tout

Generateur Glassmorphism - Effet Verre CSS Moderne

Créez de superbes effets glassmorphism pour vos designs web. Cet outil génère du code CSS pour la tendance populaire d'UI en verre givré, avec flou d'arrière-plan, transparence et bordures subtiles qui créent de la profondeur. Copiez une règle .glass complète prête à coller, avec un repli @supports intégré pour que les navigateurs non compatibles restent lisibles.

Qu'est-ce que le Glassmorphism?

Le glassmorphism est une tendance de design UI moderne qui cree un effet de verre givre. Il utilise:

- Des fonds semi-transparents
- Un filtre backdrop blur
- Des bordures subtiles pour la definition
- Des ombres douces pour la profondeur

Ce style est devenu populaire en 2020-2021 et est utilise par Apple, Microsoft et de nombreuses applications web modernes.

Comment fonctionne backdrop-filter?

La propriete CSS backdrop-filter applique des effets a la zone derriere un element:

blur(10px) - Cree l'effet de verre givre
saturate(180%) - Ameliore les couleurs derriere
brightness() - Ajuste la luminosite
contrast() - Ajuste le contraste

Important: L'element doit avoir un fond semi-transparent pour que l'effet soit visible.

Quels navigateurs supportent glassmorphism?

Support de backdrop-filter:

Chrome 76+ (support complet)
Firefox 103+ (support complet)
Safari 9+ (avec prefixe -webkit-)
Edge 79+ (support complet)
Opera 63+ (support complet)

Incluez toujours le prefixe -webkit- pour Safari.

Meilleures pratiques pour le design glassmorphism

Conseils pour un glassmorphism efficace:

1. Utiliser sur des fonds colores - L'effet fonctionne mieux sur des degrades ou images
2. Garder un flou modere (8-20px)
3. Utiliser une transparence subtile (15-30%)
4. Ajouter des bordures fines
5. Considerer le contraste - Assurer la lisibilite
6. Utiliser avec moderation

Pourquoi mon effet glass ne s'affiche-t-il pas sur Safari iOS mais marche sur Chrome ?

Safari nécessite le préfixe -webkit-backdrop-filter en plus de backdrop-filter. L'outil les génère tous les deux. De plus, Safari iOS exige que l'élément parent ait un background explicite — même une couche transparente d'1px derrière — sinon le compositor GPU saute l'effet backdrop entièrement.

Generateur Glassmorphism — Créez des effets modernes de verre dépoli avec CSS backdrop-filter. Ajustez blur, transparence, bordures. 6 presets, ape — **Generateur Glassmorphism**

Quel impact le blur backdrop-filter a-t-il sur les performances ?

Significatif. backdrop-filter est gourmand en GPU car le navigateur doit rasteriser le fond, le flouter et composer. Sur Android bas de gamme (Snapdragon 4xx, 2-3 ans) un blur supérieur à 16px fait chuter le FPS de 60 à 25-30. Utilisez 8-12px en production, évitez d'empiler les couches glass et gardez les éléments petits.

Le glassmorphism sera-t-il toujours beau en 2026 ou est-ce déjà daté ?

Le glassmorphism a culminé 2020-2022 (macOS Big Sur, Windows 11) et s'est adouci depuis. La tendance 2024-2026 va vers du glass plus subtil avec le retour du néomorphisme et des layouts bento-grid. Le glass marche encore en touche premium sur les hero, modales et notifications flottantes. Utilisez-le en accent, pas comme esthétique principale.

Comment fournir un fallback pour les navigateurs sans backdrop-filter ?

Utilisez CSS @supports : @supports not (backdrop-filter: blur(10px)) { .glass { background: rgba(255,255,255,0.85); } } ainsi les navigateurs non supportés (vieux Firefox, IE) reçoivent un fond solide semi-transparent qui maintient la lisibilité. Testez toujours en Firefox mode privé où backdrop-filter était désactivé par défaut jusqu'à Firefox 103.

Comment garder le texte sur un panneau de verre accessible (WCAG) ?

Le verre translucide est l'endroit où la plupart des audits de contraste échouent. Le contraste du texte doit être mesuré contre le pire fond possible derrière le flou, pas contre le remplissage du verre. Règles pratiques :

1. Visez au moins 4.5:1 (AA) pour le texte courant et 3:1 pour le grand texte ; ciblez 7:1 (AAA) pour l'UI critique
2. Baissez la transparence (augmentez le fond solide) jusqu'à ce que le texte passe sur les zones les plus claires et les plus sombres du fond
3. Préférez un texte sombre sur verre clair au-dessus de fonds clairs, et un texte blanc sur verre sombre au-dessus de fonds sombres
4. Ajoutez une légère ombre de texte ou un remplissage plus opaque derrière le texte si le fond est chargé
5. Revérifiez le contraste avec le repli @supports actif, car il change le fond effectif

Vérifiez la valeur finale dans un vérificateur de contraste, pas à l'œil.

Comment utiliser la classe .glass générée avec le repli @supports ?

Activez "Règle CSS complète + repli" et l'outil enveloppe chaque déclaration dans un sélecteur .glass réutilisable, puis ajoute un bloc @supports not (backdrop-filter: blur(1px)) qui bascule vers un fond solide plus opaque. Collez tout l'extrait dans votre feuille de style et ajoutez class="glass" à n'importe quelle carte, modale ou navbar — sans écrire la feature query à la main. L'opacité du repli est calculée depuis la transparence choisie, donc les navigateurs qui désactivent backdrop-filter (Firefox mode privé, anciens moteurs) affichent encore un panneau solide lisible conforme à votre design. Désactivez l'interrupteur pour copier uniquement les déclarations.