Générateur de Glassmorphism
Concevez des panneaux en verre dépoli : flou, transparence, bords lumineux et ombres douces — avec des scènes colorées en direct derrière le verre.
Remarque : backdrop-filter nécessite le préfixe -webkit- pour Safari — il est inclus dans la sortie.
Comment utiliser le générateur de Glassmorphism
- Choisissez une couleur de teinte et réglez la transparence du panneau : les valeurs basses font plus « vitreux ».
- Augmentez le flou pour dépolir l'arrière-plan ; ajoutez de la saturation pour faire ressortir les couleurs derrière le verre.
- Ajoutez un bord clair subtil (blanc semi-transparent) pour simuler le reflet du bord du verre.
- Réglez l'ombre portée douce et le rayon des coins pour parfaire l'effet flottant.
- Changez de scène d'arrière-plan pour tester la lisibilité, puis copiez le code CSS ou Tailwind.
À propos de ce générateur de Glassmorphism
Le glassmorphism est un style d'UI où les panneaux ressemblent à du verre dépoli : fond semi-transparent, flou d'arrière-plan, bord clair subtil et ombre douce. Il est devenu une tendance de design majeure pour les cartes, barres de navigation et modales. L'ingrédient magique est la propriété backdrop-filter, qui applique des effets à ce qui se trouve derrière l'élément.
Ce générateur vous permet de régler chaque ingrédient — teinte, transparence, flou, saturation, bord lumineux, rayon et ombre — sur trois scènes de test colorées pour juger l'effet de façon réaliste. La sortie inclut le préfixe -webkit-backdrop-filter pour Safari. Pour l'accessibilité, vérifiez toujours que le texte sur le verre garde un contraste suffisant sur les arrière-plans chargés.
FAQ Glassmorphism
Quels navigateurs prennent en charge backdrop-filter ?
backdrop-filter est pris en charge par tous les navigateurs modernes. Chrome et Edge le prennent en charge sans préfixe ; Safari requiert le préfixe -webkit-, que le générateur inclut automatiquement. Sur de très anciens navigateurs, le panneau revient simplement à son fond semi-transparent, ce qui reste acceptable.
Pourquoi mon effet de verre ne s'affiche-t-il pas ?
backdrop-filter ne fonctionne que lorsqu'il y a quelque chose derrière l'élément : une image de fond, un dégradé ou un autre contenu. Si l'élément repose sur un fond uni et plat, le flou n'a rien à flouter. Assurez-vous aussi que le fond du panneau a de la transparence (alpha inférieur à 100 %), sinon l'arrière-plan est entièrement couvert.
À quoi sert la fonction saturate() ?
saturate() intensifie (au-dessus de 100 %) ou atténue (en dessous de 100 %) les couleurs de l'arrière-plan avant le flou. Des valeurs autour de 130–180 % rendent les couleurs derrière le verre vives et aident l'effet dépoli à se lire clairement — une signature du look glassmorphism.
Le glassmorphism est-il mauvais pour l'accessibilité ?
Il peut l'être si le texte repose sur des arrière-plans très flous et peu contrastés. Gardez une transparence modérée, utilisez le bord lumineux pour définir les contours, et testez votre panneau sur l'arrière-plan le plus chargé qu'il couvrira. Les trois scènes intégrées vous aident à vérifier le contraste avant la mise en ligne.
Puis-je combiner glassmorphism et Tailwind ?
Oui. L'onglet Tailwind émet des classes à valeur arbitraire (bg-[rgba(...)], backdrop-blur-[12px], etc.) qui fonctionnent avec Tailwind CSS v3+ sans configuration.