Générateur de Glassmorphism CSS

Cet outil crée un effet CSS de verre dépoli (glassmorphism) en combinant un fond semi-transparent avec backdrop-filter: blur() — faites glisser les curseurs au-dessus de l'aperçu coloré pour voir la carte en verre flouter ce qui se trouve derrière elle, puis copiez le CSS. Il génère aussi le préfixe -webkit-backdrop-filter dont Safari a besoin, puisque backdrop-filter le requiert encore là-bas.

En quoi consiste cet outil ?

Le glassmorphism est un style d'interface où un élément ressemble à du verre dépoli : un fond semi-transparent laisse apparaître les couleurs situées derrière lui, tandis que backdrop-filter: blur() floute cet arrière-plan pour qu'il se lise comme du verre plutôt que comme un simple panneau transparent. Une bordure fine et semi-transparente ainsi que des coins arrondis complètent généralement l'effet.

Cet outil vous permet de construire cet effet visuellement. L'aperçu se situe au-dessus d'un dégradé animé précisément pour que le flou soit visible — le glassmorphism ne se lit correctement que sur un fond coloré ou détaillé, pas sur une page blanche unie. Ajustez l'opacité de la couleur de fond, l'intensité du flou, l'opacité de la bordure et le rayon des coins, puis copiez le CSS généré.

Source : Filter Effects Module Level 1, W3C — définit backdrop-filter, la propriété sur laquelle repose cet effet.

Pourquoi l'utiliser ?

Aperçu en direct sur un fond animé et coloré, pour voir réellement l'effet de verre dépoli au lieu de deviner des valeurs de flou sur un fond vide.
Contrôle complet de l'opacité du fond, de l'intensité du flou, de l'opacité de la bordure et du border-radius au même endroit.
Génère automatiquement à la fois backdrop-filter et le préfixe -webkit-backdrop-filter, pour ne pas oublier la compatibilité Safari.
Fonctionne entièrement dans votre navigateur — rien de ce que vous configurez n'est envoyé où que ce soit.
Gratuit, sans inscription, fonctionne sur mobile.

Mode d'emploi

Choisissez une couleur de fond et ajustez son opacité — une opacité faible (10–25 %) se lit comme du verre ; une opacité plus élevée ressemble davantage à un panneau teinté solide.
Augmentez l'intensité du flou pour flouter ce qui se trouve derrière l'élément — c'est ce qui crée réellement l'aspect verre dépoli, distinct de la transparence elle-même.
Ajustez l'opacité de la bordure pour ajouter un léger bord clair, ce qui aide la carte en verre à se lire comme une surface distincte plutôt que de se fondre dans le fond.
Définissez le border-radius pour des coins arrondis — les cartes en glassmorphism sont presque toujours arrondies, rarement à angles vifs.
Copiez le CSS généré et collez-le dans votre feuille de style. N'oubliez pas que l'élément a besoin de quelque chose avec de la couleur ou de la texture derrière lui — le glassmorphism est invisible sur un fond plat d'une seule couleur.

Exemple

Entrée

Fond : blanc à 20 % d'opacité · Flou : 10px · Opacité de la bordure : 30 % · Rayon : 16px

Résultat

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

Un style classique de carte en verre dépoli utilisé dans les panneaux de connexion, les barres de navigation et les widgets de tableau de bord sur un fond coloré ou photographique.

Compatibilité avec Safari et les autres navigateurs

backdrop-filter est pris en charge dans les versions actuelles de Chrome, Firefox, Edge et Safari, mais Safari a historiquement nécessité le préfixe -webkit-backdrop-filter en plus de la propriété non préfixée pour afficher le flou — sans lui, les anciennes versions de Safari ignorent silencieusement le flou et n'affichent que le fond plat transparent. C'est pourquoi cet outil génère toujours les deux déclarations.

Consultez la documentation backdrop-filter de MDN pour les détails actuels de compatibilité entre navigateurs : https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

Pourquoi le glassmorphism a besoin de quelque chose derrière lui

backdrop-filter ne floute que ce qui se trouve visuellement derrière l'élément — une image de fond, un dégradé, un autre élément coloré, ou du contenu qui défile en dessous. Sur un fond blanc uni ou d'une seule couleur, il n'y a rien à flouter, donc l'effet est invisible et l'élément ressemble simplement à une boîte arrondie légèrement teintée. Placez toujours les éléments en glassmorphism sur un dégradé, une photo ou un fond chargé pour que l'effet soit visible.

À associer avec d'autres effets CSS

Les cartes en glassmorphism combinent souvent un box-shadow subtil en dessous pour plus de profondeur. Générez ici le CSS du verre dépoli, puis ajoutez une ombre douce avec le Générateur de Box Shadow et appliquez les deux déclarations au même élément.

→ Générateur de Box Shadow · Générateur de Border Radius

Foire aux questions

Pourquoi l'effet de verre n'apparaît-il pas sur ma page ?

backdrop-filter floute ce qui se trouve derrière l'élément. Si votre élément se trouve sur un fond blanc uni ou d'une seule couleur, il n'y a rien de visuellement intéressant à flouter, donc il ressemble simplement à une boîte légèrement teintée. Placez-le sur un dégradé, une image ou un autre fond détaillé pour que l'effet de verre dépoli soit visible.

Ai-je besoin du préfixe -webkit-backdrop-filter ?

Oui, si vous voulez que l'effet s'affiche de manière fiable dans Safari. Cet outil génère toujours à la fois le backdrop-filter standard et la version préfixée -webkit- ensemble, car Safari a historiquement eu besoin du préfixe pour appliquer le flou.

Quelle est la différence entre l'opacité du fond et le flou ?

L'opacité du fond contrôle la quantité de votre couleur de teinte choisie qui apparaît par rapport à ce qui transparaît sans altération. Le flou contrôle à quel point ce fond visible est estompé/adouci. Le glassmorphism utilise les deux ensemble — un peu de transparence plus un peu de flou — plutôt que l'un seul.

Puis-je utiliser backdrop-filter sur n'importe quel élément ?

Oui, mais cela n'affecte que ce qui se trouve visuellement derrière cet élément dans le rendu de la page, pas les enfants de l'élément lui-même. Cela a aussi un coût en performance sur certains appareils lorsqu'il est appliqué à de nombreux éléments ou animé fréquemment, il est donc préférable de l'utiliser sur un petit nombre de surfaces d'interface importantes comme des cartes, des fenêtres modales ou des barres de navigation, plutôt que sur des dizaines de petits éléments.

Pourquoi ma bordure est-elle à peine visible ?

La bordure de cet outil utilise un blanc semi-transparent, volontairement discret — un bord clair qui aide le panneau en verre à se lire comme une surface distincte sans ressembler à un contour dur et opaque. Augmentez le curseur d'opacité de la bordure si vous voulez un bord plus visible.