Comment utiliser : Générateur de glassmorphism
- Ajustez le flou, la saturation et l’opacité du fond jusqu’à obtenir le rendu souhaité sur l’arrière-plan d’exemple.
- Changez l’arrière-plan de l’aperçu pour vérifier la lisibilité sur des images chargées ou des designs sombres.
- Copiez le CSS (avec préfixe et solution de repli) ou les classes Tailwind à valeurs arbitraires.
- Gardez à l’esprit que l’effet n’apparaît que s’il y a quelque chose de coloré derrière l’élément.
Qu’est-ce que le glassmorphism ?
Le glassmorphism est l’effet verre dépoli popularisé par macOS et Windows 11 : un panneau semi-transparent qui floute ce qui se trouve derrière lui, généralement avec une fine bordure claire et une ombre douce. En CSS, il se crée avec backdrop-filter: blur() associé à une couleur de fond translucide.
Explication du CSS
background: rgba(255,255,255,.18): la teinte. Trop opaque, le flou disparaît ; trop transparent, le texte devient difficile à lire.backdrop-filter: blur(12px) saturate(160%): floute et renforce légèrement les couleurs derrière l’élément, ce qui évite que le verre paraisse gris.-webkit-backdrop-filter: Safari exige toujours le préfixe pour une prise en charge fiable, et c’est la ligne que les développeurs oublient le plus souvent.- Une bordure blanche semi-transparente de 1px définit le contour du verre.
Performances et accessibilité
Le flou d’arrière-plan sollicite fortement le GPU : évitez les grandes zones floutées qui s’animent ou se superposent à une vidéo, et testez le défilement sur les téléphones d’entrée de gamme. Vérifiez toujours le contraste du texte sur la partie la plus chargée de l’arrière-plan avec le Vérificateur de contraste, et conservez la règle de repli afin que les navigateurs sans prise en charge affichent un fond plus opaque et lisible.
Dans Webflow
Le panneau Style de Webflow propose une option Filtres d’arrière-plan dans la section Effets : ajoutez-y Flou (et Saturation), définissez la couleur de fond avec alpha, et Webflow génère le CSS nécessaire.
Aussi recherché comme : glassmorphism css, effet verre dépoli css, backdrop-filter, flou arrière-plan css, effet glassmorphism, générateur glassmorphism, webkit-backdrop-filter.
Outils complémentaires : Générateur de glassmorphism
- Générateur d’ombres CSS — Empilez plusieurs couches d’ombre, ajustez les décalages, le flou, l’étalement et l’opacité sur une carte en direct, puis copiez le CSS box-shadow ou text-shadow.
- Générateur de dégradé CSS — Concevez un dégradé visuellement : faites glisser les arrêts de couleur, modifiez l’angle ou le type, partez d’un préréglage, puis copiez un CSS prêt pour la production avec une couleur de repli unie.
- Générateur de valeurs arbitraires Tailwind — Collez votre CSS et obtenez du premier coup la syntaxe entre crochets de Tailwind : espaces remplacés par des tirets bas, indications de type ajoutées, propriétés non prises en charge converties en propriétés arbitraires.
- Convertisseur HEX vers RGBA — Collez un code HEX, faites glisser le curseur d'opacité et copiez le CSS exact dont vous avez besoin : rgba() classique, rgb( / alpha) moderne ou HEX à 8 chiffres.
Questions fréquentes
Pourquoi backdrop-filter ne fonctionne-t-il pas ?
-webkit- pour Safari.backdrop-filter est-il pris en charge par tous les navigateurs ?
Quelle est la différence entre filter: blur et backdrop-filter: blur ?
filter floute l’élément lui-même, y compris son texte. backdrop-filter ne floute que ce qui se trouve derrière l’élément, ce qui garde son contenu net.