Générateur de Glassmorphism
Le générateur glassmorphism crée l’effet verre dépoli avec la propriété CSS backdrop-filter et vous permet de régler le flou, l’opacité du fond, la saturation, l’opacité de la bordure, le rayon et la couleur de teinte avec un aperçu en direct.
À propos de cet outil
Le générateur glassmorphism crée l’effet verre dépoli avec la propriété CSS backdrop-filter et vous permet de régler le flou, l’opacité du fond, la saturation, l’opacité de la bordure, le rayon et la couleur de teinte avec un aperçu en direct.
Mode d’emploi
- Choisissez la couleur de teinte du verre.
- Réglez le flou, l’opacité et la saturation.
- Définissez l’opacité de la bordure et le rayon des coins.
- Cliquez sur Copier le CSS.
Bon à savoir
- L’effet utilise backdrop-filter: blur() saturate(), qui floute tout ce qui se trouve derrière l’élément.
- Un fond semi-transparent (rgba) est nécessaire, sinon le flou reste invisible.
- Le CSS généré inclut le préfixe -webkit-backdrop-filter pour Safari.
- L’effet verre rend mieux sur des fonds colorés ou des images ; sur une couleur unie, le flou ne se voit pas.
- Surveillez le contraste du texte : les panneaux translucides peuvent passer sous le seuil de contraste WCAG sur des fonds chargés.
Fonctionne entièrement dans votre navigateur : rien de ce que vous saisissez n’est envoyé ni stocké.
Questions fréquentes
Comment créer un effet verre en CSS ?
Donnez à l’élément un fond semi-transparent, comme rgba(255,255,255,0.15), et backdrop-filter: blur(12px); cet outil écrit la règle complète.
Pourquoi mon backdrop-filter ne fonctionne-t-il pas ?
L’élément doit avoir un fond transparent ou semi-transparent, et il doit y avoir quelque chose derrière lui à flouter. Safari a aussi besoin du préfixe -webkit-.
Le glassmorphism est-il accessible ?
Il peut l’être si le texte garde un contraste suffisant. Testez les couleurs de texte sur la partie la plus chargée du fond.
backdrop-filter nuit-il aux performances ?
Le flou sollicite fortement le GPU : évitez de l’appliquer à de très grandes zones ou à de nombreux éléments à la fois, surtout sur les smartphones d’entrée de gamme.