Comment créer un effet glassmorphism en CSS
Publié le 15 septembre 2026 · 2 min de lecture
Le look de verre dépoli "glassmorphism" — un panneau translucide et flou flottant sur un fond coloré — se résume à une combinaison spécifique d'opacité de fond, de flou backdrop-filter, et d'une bordure subtile. Cet outil vous permet de régler les trois avec un aperçu en direct.
Essayer Générateur de GlassmorphismÉtapes
- 1
Ouvrez le Générateur de Glassmorphism
Accédez au générateur de glassmorphism.
- 2
Définissez la teinte et l'opacité
Choisissez la couleur de base du panneau de verre et à quel point il doit être transparent.
- 3
Ajustez le flou et la saturation
Définissez la force du flou d'arrière-plan et un boost de saturation pour ce look vif de verre dépoli.
- 4
Copiez le CSS
Collez les règles générées de background, backdrop-filter et border dans votre feuille de style.
Questions fréquentes
Le flou d'arrière-plan n'a un effet visible que lorsqu'il y a quelque chose derrière l'élément à flouter — un fond uni simple ne montrera pas l'effet de verre, donc l'aperçu en direct utilise un dégradé coloré pour le démontrer correctement.
C'est pris en charge dans tous les navigateurs modernes ; de très anciennes versions de navigateur pourraient ne pas rendre le flou, bien que le fond semi-transparent seul fournisse encore un look de secours raisonnable.
Oui — l'opacité de la bordure est ajustable en plus du flou, de la teinte et de la saturation, puisqu'une bordure de lumière subtile fait partie de ce qui vend le look de verre.
Comme l'aperçu rend le vrai CSS en direct, vous pouvez affiner l'effet jusqu'à ce qu'il ait le bon aspect avant même de copier une seule ligne de code.