Générateur CSS Glassmorphism Gratuit en Ligne
Générez des effets glassmorphism avec aperçu en direct. Ajustez le flou, la transparence, la bordure et la couleur.
Who uses the Générateur CSS Glassmorphism?
- Développeurs UI implémentant des composants de carte en verre dépoli pour des interfaces web modernes.
- Designers créant des maquettes glassmorphisme conformes à l'esthétique actuelle de macOS et Windows 11.
- Apprenants frontend explorant CSS backdrop-filter et les effets de transparence modernes.
How the Générateur CSS Glassmorphism works
Ajustez la couleur de teinte et la transparence pour définir la couleur et l'opacité du fond de verre.
Réglez l'intensité du flou (backdrop-filter: blur) pour l'effet de profondeur du verre dépoli.
Ajustez le rayon de bordure et l'opacité de bordure pour le style des bords.
Copiez le code CSS complet, qui inclut la version préfixée -webkit- pour la compatibilité Safari.
Tips & tricks
- Le box-shadow dans le CSS généré est fixe (une ombre ambiante douce) — il n'est pas réglable via les curseurs, seuls la teinte, le flou, le rayon de bordure et l'opacité de bordure le sont.
- Des valeurs de transparence plus élevées (proches du maximum) rendent l'effet de verre plus subtil ; des valeurs plus basses rendent la carte plus solide.
- Prévisualisez toujours votre élément de verre sur le fond réel sur lequel il sera placé — l'effet paraît très différent sur une photo par rapport à une couleur unie.
- Copiez à la fois les lignes backdrop-filter et -webkit-backdrop-filter — Safari a spécifiquement besoin de la version préfixée.
Frequently Asked Questions
Qu'est-ce que le glassmorphisme ?
Le glassmorphisme est une tendance de design UI (popularisée vers 2020) utilisant des éléments façon verre dépoli : fonds semi-transparents, flou d'arrière-plan et bordures subtiles pour créer profondeur et superposition. Popularisée par macOS Big Sur d'Apple et Windows 11.
Quelle propriété CSS crée l'effet de flou du verre dépoli ?
backdrop-filter: blur(10px) applique un flou à tout ce qui se trouve derrière l'élément. Combiné à une background-color semi-transparente et une bordure claire, il crée l'effet de verre — exactement ce que contrôlent les curseurs de cet outil.
backdrop-filter fonctionne-t-il dans tous les navigateurs ?
backdrop-filter est pris en charge dans Chrome, Edge et Safari (avec préfixe -webkit-). Firefox a ajouté la prise en charge dans la version 103. La sortie de cet outil inclut toujours à la fois backdrop-filter et -webkit-backdrop-filter pour une compatibilité maximale.
Quel fond est nécessaire derrière un élément glassmorphisme ?
Le glassmorphisme n'est esthétique que sur un fond coloré, flou ou en dégradé — il a besoin de quelque chose à flouter. Sur un fond blanc ou uni, l'effet de flou est invisible. L'aperçu de l'outil utilise une scène en dégradé pour le démontrer.
Le glassmorphisme est-il accessible ?
Le glassmorphisme peut poser des problèmes de contraste — un texte sur du verre transparent sur des fonds variés peut échouer aux exigences de contraste WCAG. Testez toujours avec l'image de fond réelle et assurez-vous que le texte atteint un ratio de contraste de 4,5:1.
Is my data safe when using the Générateur CSS Glassmorphism?
Completely safe. The Générateur CSS Glassmorphism processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the Générateur CSS Glassmorphism output in commercial projects?
Yes. The Générateur CSS Glassmorphism is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the Générateur CSS Glassmorphism follow official standards?
Yes. The Générateur CSS Glassmorphism is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.