Générateur d’effet de verre CSS

Par Bogdan Sandu (EN) · Publié 9 juin 2025 · Dernière mise à jour 13 septembre 2026

Ce générateur de glassmorphism CSS crée un effet de verre dépoli à l’aide de quatre curseurs et fournit le CSS correspondant. L’aperçu applique les mêmes valeurs à une carte et à une fenêtre modale. Des formes flottantes en arrière-plan permettent de voir l’effet du flou.

Ce que vous pouvez définir :

• Blur de 0px à 20px, le rayon est passé à backdrop-filter: blur()
• Transparence de 0 à 1, le canal alpha du fond du panneau blanc
• Outline de 0px à 5px, la largeur de la bordure blanche semi-transparente
• Saturation de 100% à 200%, appliquée via saturate() afin que les couleurs derrière le verre soient plus fortes

Trois préréglages vous donnent un point de départ : Subtil (flou 5 px, 0,2 alpha), Gras (flou 15 px, 0,4 alpha, contour 2 px) et Givré (flou 20 px, 0,1 alpha, pas de contour). Shuffle sélectionne des valeurs aléatoires, Reset restaure les valeurs par défaut et Copier place le CSS dans votre presse-papiers. Tout fonctionne dans votre navigateur.

Comment utiliser ce générateur de CSS Glassmorphism

1. Cliquez sur un paramètre prédéfini ou faites glisser les quatre curseurs jusqu’à ce que la carte et les aperçus modaux aient l’apparence souhaitée.
2. Gardez un œil sur le texte à l'intérieur de la carte. Si elle devient difficile à lire, diminuez le flou ou augmentez la valeur de transparence.
3. Cliquez sur Copier et collez le bloc dans la règle de votre panneau, carte ou barre de navigation.
4. Assurez-vous que l'élément se trouve sur un dégradé ou une image. Sur une couleur plate, le flou n'a rien à montrer.

Avec les valeurs par défaut, le générateur affiche ceci :

.glass-panel {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

Le sélecteur est à vous d'ajouter. L'outil ne copie que les déclarations, de sorte qu'elles tombent dans n'importe quelle règle existante.

Ce que l'outil ne fait pas

• La couleur du panneau est toujours blanche. Pour le verre teinté, modifiez les trois premiers chiffres de rgba(255, 255, 255, …) en fonction de la couleur de votre marque. Un convertisseur HEX vers RGB vous donne les valeurs des canaux.
• La couleur de la bordure, le rayon du coin et l'ombre sont fixés à rgba(255, 255, 255, 0.3), 16px, et 0 4px 30px rgba(0, 0, 0, 0.1). Réglez-les ensuite avec le générateur de border-radius CSS et le générateur de box-shadow CSS.
• Il exporte uniquement du CSS brut, pas de SCSS ou de Tailwind. Les valeurs par défaut correspondent au backdrop-blur-[10px] backdrop-saturate-[1.8] bg-white/30 border border-white/30 rounded-2xl de Tailwind.
• Il n'ajoute pas de recours. Pour les navigateurs sans backdrop-filter (EN), enveloppez un arrière-plan opaque dans un bloc @supports (EN), comme indiqué dans la section étape par étape ci-dessous.

Qu'est-ce qu'un générateur de Glassmorphisme CSS ?

Un générateur de glassmorphisme CSS est un outil basé sur un navigateur qui transforme les entrées du curseur en CSS prêt à l'emploi pour l'effet d'interface verre givré.

Le look lui-même, glassmorphism (EN), emprunte son nom au vrai verre : des panneaux semi-transparents qui brouillent tout ce qui se trouve derrière eux. Michal Malewicz de Hype4.Academy a inventé le terme dans un article publié en novembre 2020 (EN). Il est resté parce qu’il donnait à une tendance visuelle dispersée un nom unique et consultable.

Ce qu'un générateur donne en retour, une fois que vous arrêtez de faire glisser les curseurs :

• Un aperçu en direct du panneau de verre sur un échantillon d'arrière-plan
• CSS prêt à copier, ou classes Tailwind sur quelques outils
• Contrôles réglables pour le flou, la transparence, la bordure et parfois le rayon d'angle

Au lieu d'examiner les valeurs de flou et d'opacité à partir d'une mockup (EN) statique, vous faites glisser quelques curseurs et copiez le code résultant. Pas de calculs manuels sur les canaux rgba alpha, pas de devinettes sur le rayon de flou.

La plupart des outils, y compris celui-ci, exportent du CSS simple. Un plus petit nombre restitue à la place les classes d'utilitaires Tailwind ou les variables SCSS, ce qui est important une fois que vous avez choisi un flux de travail.

Quelles propriétés CSS produisent l'effet Glassmorphism ?

Quatre propriétés CSS se combinent pour construire l'apparence du verre : backdrop-filter, une couleur de fond translucide, une bordure subtile, et box-shadow.

Laissez tomber l'un des quatre et l'effet se lit comme plat au lieu de vitreux. Déposez le filtre de fond spécifiquement et il n'y a pas de flou du tout, juste une boîte transparente.

Backdrop-filter et Blur Radius

Propriété principale : backdrop-filter (EN) rend flou la zone peinte derrière un élément, en utilisant blur() comme fonction de filtre la plus courante.

• Faible flou (environ 5px à 8px) : l'arrière-plan reste partiellement lisible à travers le panneau
• Mid blur (environ 10px à 16px) : la valeur par défaut dans la plupart des générateurs
• Haut flou (20px et plus) : l'arrière-plan se dissout dans un doux lavage de couleur

Les anciennes versions de Safari ont besoin de la propriété dupliquée comme -webkit-backdrop-filter, un préfixe fournisseur que la plupart des générateurs, y compris celui-ci, ajoutent automatiquement.

Couleur d'arrière-plan et transparence Alpha

Valeur alpha : background-color passe par rgba() ou hsla() afin que la couleur du panneau reste transparente au lieu d'être unie.

La conversion d'une couleur de marque de l'hexadécimal à une valeur rgba avec le bon canal alpha est la partie difficile. Un convertisseur HEX vers RGB économise les calculs manuels.

La plupart des générateurs définissent la valeur alpha par défaut entre 0,1 et 0,3. Poussez au-delà de 0,4 et le panneau cesse de ressembler à du verre et commence à ressembler à une fenêtre teintée.

Couches de bordure et d'ombre

Verre bord : une bordure de 1px dans une lumière, blanc semi-transparent simule le bord réfléchissant que vous verriez sur le vrai verre.

Box-shadow fait le reste du travail. Il ajoute une ombre portée douce de sorte que le panneau semble flotter au-dessus de l'arrière-plan plutôt que de s'asseoir à ras de celui-ci. Un générateur d'ombre de boîte CSS gère les calculs de décalage et de rayon de flou si vous construisez l'ombre séparément.

Sautez l'ombre et le panneau semble collé. Sautez la bordure et les bords disparaissent dans ce qui se trouve derrière eux.

De quel contexte un élément en verre a-t-il besoin pour fonctionner ?

Un panneau de verre a besoin d'une couche chargée derrière lui, dégradé ou image, car le flou n'a rien à diffuser sur une seule couleur plate.

Générer un dégradé CSS (EN) lisse derrière le panneau est un moyen fiable de donner au flou quelque chose avec quoi travailler. Les dégradés multi-arrêts se transforment en douces transitions de couleurs qui semblent intentionnelles plutôt que boueuses.

Le déploiement de ce look par Apple dépendait exactement de cette exigence. macOS Big Sur livré le 12 novembre 2020 (EN), associant des barres de menus translucides à des fonds d’écran dynamiques et changeants de couleur. Ces papiers peints donnent au flou une texture en mouvement.

Placez le même panneau de verre sur un fond uni blanc ou monochrome et l'effet devient plat. Il n’y a rien pour diffuser le flou, donc le panneau ressemble simplement à un rectangle légèrement brumeux.

Ce qui a tendance à fonctionner, et ce qui ne fonctionne pas :

• Travaux : photographies, dégradés multi-arrêts, captures d'écran colorées d'applications
• Fonctionne mal : couleurs de marque unies, arrière-plans blancs ou presque blancs

Quels navigateurs supportent le filtre de fond ?

Backdrop-filter fonctionne maintenant dans tous les principaux navigateurs, bien que le support complet et sans préfixe ait mis des années à arriver partout.

Obtenir le même aspect de verre pour un rendu identique partout était l'un des problèmes de compatibilité entre navigateurs (EN) les plus désordonnés en CSS. Cet écart s’est en grande partie comblé.

Chiffres clés, selon les données Web Platform Baseline tracker (EN) et caniuse (EN) :

• Chrome a livré un filtre de fond sans préfixe à partir de Chrome 76 (EN), publié en juillet 2019
• Firefox a ajouté le support sans préfixe plus tard, dans Firefox 103 (EN), publié le 26 juillet 2022
• Safari a abandonné son exigence de préfixe -webkit- à Safari 18 (EN), publié le 16 septembre 2024
• backdrop-filter a atteint le statut de référence "Nouveaument disponible" le 16 septembre 2024, avec le statut "Largement disponible" attendu le 16 mars 2027

Internet Explorer n'a jamais ajouté la propriété, ce qui n'a d'importance que si votre trafic l'inclut toujours.

Exigences de préfixe WebKit de Safari

Les anciens Safari et les anciens WebViews iOS ont toujours besoin du préfixe -webkit- même après la sortie de Safari 18. Conserver les deux lignes dans le CSS plutôt que seulement la version sans préfixe.

Laissez tomber le préfixe entièrement et les visiteurs de Safari avant 2024 n'obtiendront aucun flou, quelle que soit la couleur d'arrière-plan de secours que vous avez définie.

Quand le Glassmorphisme ne fonctionne-t-il pas ?

Le glassmorphisme échoue le plus souvent sur le contraste, pas sur le code. Si le texte sur un panneau de verre ne peut pas être lu sur un arrière-plan flou et occupé, l'effet va à l'encontre de l'ergonomie.

Limites de contraste et d'accessibilité

Les Recommandations pour l'accessibilité du contenu Web fixent un rapport minimum de contraste de couleur (EN) de 4,5 :1 pour le corps normal du texte (EN). Un panneau translucide placé sur une photo occupée dépasse rapidement cette limite, en particulier avec un texte clair sur un arrière-plan clair et flou.

Exécuter les couleurs du verre et du texte à travers un générateur de palette de couleurs accessible avant l'expédition capte cela plus tôt que de le regarder sur un seul moniteur.

Voici les cas courants dans la pratique :

• Texte à faible contraste : le texte blanc sur un fond clair et flou disparaît en quelques secondes après avoir dépassé une section lumineuse
• Interfaces denses en texte : les tableaux de bord et les tableaux de données perdent plus de lignes illisibles qu'ils ne gagnent de l'esthétique
• Navigateurs plus anciens : Firefox avant 2022 et les règles sans préfixe dans Safari avant 2024 rendent un panneau plat et non flou qui change l'équilibre visuel de la page

Coût des performances sur les appareils mobiles

Backdrop-filter n'est pas libre de rendre. Chaque panneau flou oblige le navigateur à repeindre le calque en dessous, et l'empilement de plusieurs panneaux de verre sur un écran comporte ce coût.

Les téléphones Android économiques avec des GPU plus faibles ressentent cela en premier, généralement comme des images tombées lors du défilement plutôt que comme un problème visible. Un panneau de verre cause rarement des problèmes.

Cinq ou six empilés sur un seul tableau de bord, actualisés au défilement, est une autre histoire.

Quel outil de génération de CSS Glassmorphism devriez-vous utiliser ?

Trois chemins réels existent ici : un générateur dédié comme glassmorphism.com (EN), une alternative plus légère comme css.glass (EN), ou en codant à la main les quatre propriétés vous-même. Cette page fait partie du deuxième groupe.

glassmorphism.com compte 250 000 utilisateurs dans 137 pays, selon les chiffres d'utilisation du site. Cela en dit long sur la fréquence à laquelle les gens recourent à un générateur au lieu d’écrire les valeurs à partir de zéro.

Si vous voulez voir la gamme de looks avant de toucher un curseur, une galerie d'exemples de glassmorphism CSS (EN) est plus rapide à parcourir que des essais et erreurs à l'intérieur d'un générateur.

Aucun des trois clous de chaque rayon de coin ne semble tout droit sorti de la boîte. L'association du code exporté avec un générateur de rayon de bordure CSS dédié pour le polissage final est une pratique courante.

Microsoft exécute une idée connexe sous un nom différent. Le système Fluent Design de Windows 11 utilise un matériau acrylique (EN) pour le même aspect translucide et superposé, juste ajusté pour un système d'exploitation différent.

Devriez-vous exporter des classes CSS brutes, SCSS ou Tailwind ?

Le bon format d'exportation dépend de votre pile, pas de celle qui semble la plus avancée. Raw CSS convient à n'importe quel projet. SCSS convient aux équipes déjà sur un préprocesseur, et les classes Tailwind conviennent aux projets déjà construits autour du style utilitaire.

CSS brut

Option la plus portable : collez le code exporté directement dans une feuille de style et cela fonctionne, pas d'étape de compilation et pas de dépendance.

Faites-le passer par un minifier CSS (EN) avant de l'envoyer en production si la taille du fichier sur la page est importante.

• Fonctionne bien lorsque : le projet n’a pas de pipeline de création, ou que l’effet de verre n’apparaît que sur un ou deux éléments
• Ajoute de la friction lorsque : les mêmes valeurs doivent être répétées sur une douzaine de composants, puisqu'il n'y a pas de réutilisation de variables

SCSS

• Fonctionne bien lorsque : le projet compile déjà Sass, et les panneaux de verre apparaissent à plusieurs reprises avec de légères variations
• Ajoute des frictions lorsque : le projet n'a pas d'étape de construction, car en ajouter une uniquement pour les variables est excessif

Les variables SCSS et les mixins transforment les quatre propriétés de verre en un seul bloc réutilisable. Modifier le rayon de flou à l'échelle du site signifie alors modifier une ligne au lieu d'une douzaine.

Cette réutilisation est tout l’argument pour choisir SCSS plutôt que CSS brut ici.

Tailwind CSS

Si le projet s'appuie déjà sur les classes d'utilité de Tailwind (EN), la traduction des valeurs de flou et d'opacité dans la syntaxe backdrop-blur (EN) et de valeur arbitraire de Tailwind garde tout dans un seul système au lieu de diviser les styles en deux.

• Fonctionne bien lorsque : le reste de l'interface est déjà construit dans les classes d'utilitaires Tailwind
• Ajoute de la friction quand : la valeur de flou ou d'opacité ne correspond pas proprement à l'échelle par défaut de Tailwind, forçant des valeurs arbitraires comme backdrop-blur-[14px]

Le mélange de classes CSS et Tailwind pour le même composant a tendance à devenir désordonné rapidement. Choisissez un format d'exportation par composant et restez-y.

Comment construire un effet de morphisme de verre étape par étape ?

La création de l'effet suit à chaque fois le même ordre : l'arrière-plan d'abord, puis les quatre propriétés du verre, puis une solution de secours du navigateur.

Cela suppose une familiarité de base avec la syntaxe CSS plutôt que de l'enseigner à partir de zéro.

• Étape 1 : Placez un dégradé ou une image d'arrière-plan sur l'élément parent ou la page elle-même
• Étape 2 : Positionnez le récipient en verre de manière à ce qu'il se trouve au-dessus de cet arrière-plan, en utilisant le positionnement relatif ou absolu
• Étape 3 : Ajoutez backdrop-filter avec une valeur de flou, associé à -webkit-backdrop-filter pour les anciens Safari
• Étape 4 : Définissez la couleur d'arrière-plan sur une valeur rgba ou hsla translucide afin que la lumière passe à travers
• Étape 5 : Ajouter une bordure légère et semi-transparente et une ombre douce
• Étape 6 : Enveloppez un arrière-plan de secours opaque dans un bloc @supports pour les navigateurs sans backdrop-filter

Les étapes trois à six, avec les valeurs par défaut du générateur, ressemblent à ceci :

.glass-panel {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

@supports not (backdrop-filter: blur(1px)) {
  .glass-panel {
    background: rgba(255, 255, 255, 0.85);
  }
}

Une étape supplémentaire est importante après ces six : tester le panneau à quelques points d'arrêt en utilisant media queries (EN). Un rayon de flou qui a l'air bon sur le bureau est souvent trop lourd sur un petit écran.

Rien dans cette séquence ne change si vous utilisez un générateur au lieu de le coder à la main. L'outil ci-dessus effectue les étapes trois à cinq pour vous et remet le bloc fini. Les étapes un, deux et six restent avec vous.

Comment personnaliser les valeurs de flou, de transparence, de bordure et d'ombre ?

Quatre valeurs déterminent si un panneau de verre semble poli ou désordonné : rayon de flou, alpha de l'arrière-plan, opacité de la bordure et rayon des coins.

Les valeurs par défaut varient selon les outils. Le générateur de CSSPortal (EN) commence à être proche du flou (10 px) avec une opacité d'environ 20 %, ce qui est subtil sur un arrière-plan photo chargé. Celui-ci commence au flou (10px) avec 30% d'opacité et sature (180%).

Saturation et luminosité : backdrop-filter accepte plus qu'une fonction de flou. saturate() ou brightness() sont souvent utilisés à côté de celui-ci pour accentuer les couleurs qui traversent le verre.

Un générateur de filtre de couleur (EN) dédié est un moyen plus rapide de composer les valeurs de saturation et de luminosité que de taper des nombres à l'aveugle.

Choix de la fonction couleur : rgba() est la fonction par défaut dans la plupart des générateurs. hsla() se lit plus intuitivement une fois que vous pensez déjà en termes de teinte et de luminosité plutôt qu'en termes de canaux rouge, vert et bleu.

La conversion d'une couleur de marque hexadécimale en valeurs basées sur la teinte d'abord, par l'intermédiaire d'un convertisseur HSL vers RGB, rend ce changement plus facile.

Aucune de ces valeurs ne floute rien par défaut. La spécification Filter Effects Module (EN) définit la valeur initiale de backdrop-filter à none, de sorte qu'un panneau reste net jusqu'à ce qu'une fonction de filtre soit écrite explicitement.

Quelles erreurs courantes cassent un effet de glassmorphisme ?

Quatre erreurs répétables causent la plupart des échecs de glassmorphisme, et aucune d'entre elles n'est de mauvais goût.

L'article web.dev article on backdrop-filter (EN) de Google recommande exactement la troisième solution : revenir à une image simple plutôt qu'à un polyfill JavaScript. Un polyfill ajoute un coût réel d'exécution pour ce qui est un effet purement décoratif.

Le fait de sauter cette option n'a pas seulement l'air pire sur les anciens navigateurs. Il brise discrètement l'accessibilité web (EN) pour toute personne exécutant encore une version de Firefox antérieure à 2022 ou une ancienne WebView.

Une erreur plus récente est apparue depuis 2025 : confondre la sortie de ce générateur avec le verre liquide d'Apple. Apple a présenté ce matériel basé sur la réfraction et le mouvement (EN) à la WWDC le 9 juin 2025, en le livrant sur iOS 26 et macOS Tahoe 26.

Quatre propriétés CSS statiques ne peuvent pas reproduire la réfraction ou la réponse tactile en temps réel. Cela dépend du rendu natif, et non du seul filtre de toile de fond, alors ne promettez pas à un client "Liquid Glass" lorsque le livrable est un panneau CSS glassmorphism.

Si une erreur est difficile à repérer dans la sortie minifiée du générateur, exécuter d'abord le code à travers un CSS beautifier (EN) rend les quatre propriétés plus faciles à parcourir ligne par ligne.

Questions fréquentes : Générateur d’effet de verre CSS

D’où vient la tendance du design glassmorphisme ?

Le terme fait référence à l'article de Michal Malewicz de novembre 2020 sur Hype4.Academy, qui regroupait les interfaces en verre dépoli dispersées sous un seul nom commun. Le style visuel est antérieur à l’étiquette. Il est apparu dans les panneaux translucides du système d'exploitation avant que le filtre de fond n'existe en tant que CSS.

Le glassmorphisme est-il identique au neumorphisme ?

Non, ils fonctionnent sur une logique visuelle opposée. Le Glassmorphism repose sur la transparence et le flou, en superposant un panneau transparent sur un fond dégradé occupé. Le neumorphisme utilise des ombres douces de couleurs assorties sur une surface solide pour donner l’impression que les éléments ont été extrudés ou pressés.

Avez-vous besoin de JavaScript pour créer un effet de morphisme de verre ?

Non. L'effet s'exécute entièrement sur background-filter, background-color, border et box-shadow, quatre propriétés CSS sans aucun script impliqué. JavaScript n'entre dans l'image que pour basculer les thèmes, animer le flou lors du défilement ou exécuter la propre interface de curseur d'un générateur.

Combien coûte un générateur de glassmorphisme CSS ?

Chaque générateur couvert ici, celui-ci, glassmorphism.com, et css.glass inclus, ne coûte rien à utiliser. Les alternatives payantes apparaissent principalement sous forme de fonctionnalités groupées dans des abonnements à des kits d’interface utilisateur plus importants ou sur les marchés de plug-ins Figma, et non comme des outils d’effet de verre autonomes.

Pouvez-vous utiliser un générateur de morphismes de verre avec React ou Figma ?

Oui, de différentes façons. La sortie CSS d'un générateur tombe dans le bloc className ou styled-components d'un composant React sans conversion nécessaire. Figma n'a pas de propriété backdrop-filter, donc les concepteurs la recréent en apprenant à flouer les calques dans Figma (EN) et à empiler les remplissages.

Quels outils aident à déboguer les problèmes de rendu des filtres de fond ?

Le panneau de rendu de Browser DevTools indique si un calque est réellement composé sur le GPU ou s'il revient à la peinture logicielle. L’activation ou la désactivation de la déclaration de filtre d’arrière-plan dans le panneau Styles isole la propriété lorsqu’un panneau semble inopinément plat.

Que devriez-vous réparer en premier après avoir utilisé un générateur de Glassmorphisme CSS ?

Le code exporté d'un générateur de glassmorphisme CSS doit être contrôler le contraste avant de flouter le rayon ou d'arrondir les coins. Un texte illisible sur un panneau translucide brise la page pour les utilisateurs réels, tandis qu'une valeur de flou à quelques pixels semble légèrement non polie.

Réparer l'ordre est plus important que de tout réparer à la fois.

• Contraste entre le texte et le panneau de verre
• Préfixe du fournisseur et navigateur de secours
• Amélioration du rayon de flou et des coins

Backdrop-filter apparaît déjà sur 35,7% des chargements de pages Chrome en septembre 2026, selon Chrome Platform Status (EN), même si Firefox n’a ajouté le support sans préfixe qu’en 2022. La plupart de ces mesures ont été adoptées au cours des quatre dernières années.

Une fois ces trois vérifications passées, le prochain arrêt naturel est d'explorer le neumorphisme CSS (EN) pour les interfaces qui ont besoin d'une alternative plus lourde et plus tactile aux panneaux de verre translucides.