Générateur glassmorphism CSS (effet verre dépoli)

Comment ça marche

Saisissez dans le panneau de gauche le texte qui doit figurer dans la carte ; l’aperçu dessine avec lui une carte en verre dépoli sur un fond coloré. Le curseur de flou décide à quel point tout ce qui se trouve derrière la carte se brouille : 10 pixels suffisent pour la plupart des maquettes, au-delà de 20 le fond devient méconnaissable. L’opacité du fond règle la couleur propre du verre : 25 % s’écrit rgba(255, 255, 255, 0.25) dans le code. Plus la valeur baisse, plus le verre est clair, mais plus le texte posé dessus devient difficile à lire. La visibilité de la bordure règle le fin liseré lumineux. Avec une couleur sombre comme #0f172a, vous obtenez un verre fumé pour un thème sombre. Le code écrit le flou deux fois : -webkit-backdrop-filter pour les anciens Safari et iPhone, backdrop-filter pour les autres. En bas, un repli @supports monte l’opacité à 85 % dans les navigateurs qui ne connaissent pas l’effet. L’effet ne se voit que s’il y a une image ou un motif coloré derrière la carte.

Cet outil est aussi connu sous le nom de glassmorphism css, backdrop filter blur, effet verre css, carte verre css.

Qu'est-ce que Glassmorphism ?

Le glassmorphism est un style graphique qui dessine les panneaux d’interface comme du verre dépoli : semi-transparents, avec ce qui se trouve derrière flouté. Il s’est répandu vers 2020 avec macOS Big Sur d’Apple et le Fluent Design de Microsoft. Il donne de la profondeur entre les calques, mais demande un fond décoratif et un contraste de texte bien vérifié.

Qu'est-ce que backdrop-filter ?

backdrop-filter est la propriété CSS qui applique des filtres comme blur(), brightness() ou saturate() à la zone située DERRIÈRE un élément, et non à l’élément lui-même. Le fond de l’élément doit être au moins en partie transparent pour que l’effet se voie. Comme il est recalculé pendant le défilement, il peut coûter en performance sur de grandes surfaces.

backdrop-filter ou filter : quelle différence ?

filter traite l’élément LUI-MÊME : avec filter: blur(10px), le texte et la bordure de la carte deviennent flous aussi. backdrop-filter traite ce qui se trouve DERRIÈRE l’élément ; le texte de la carte reste net et seule la photo visible au travers se brouille. Pour une carte en verre dépoli, la bonne propriété est backdrop-filter ; filter sert à flouter une image ou toute une section.

Piège : sur un fond uni, le verre ne se voit pas

backdrop-filter floute les pixels situés DERRIÈRE la carte. Si la carte est posée sur une couleur unie, il n’y a rien à flouter et elle ressemble à une simple boîte semi-transparente. Le glassmorphism a besoin d’une photo, d’un dégradé ou de formes à l’arrière-plan.

Le second piège est la lisibilité. À 10 % d’opacité, le contraste du texte dépend entièrement de l’image derrière, et une zone claire avale un texte blanc. Pour une carte qui porte du texte, gardez l’opacité entre 20 et 40 % et testez avec le vrai contenu au pire endroit du fond.

Prise en charge des navigateurs et bons usages

backdrop-filter fonctionne dans tous les grands navigateurs actuels, mais les détails comptent :

• Safari et les iPhone avant la version 18 ne comprennent que la forme -webkit- → le code contient les deux lignes
• Firefox ne le prenait pas en charge avant la version 103 (2022) → le repli @supports garde le texte lisible
• Un flou fort peut ralentir le défilement sur un téléphone modeste → restez sous 20 pixels sur les calques plein écran
• Bons usages : barre de navigation, fenêtre modale, carte sur une photo
• Mauvais usages : longs textes, tableaux, formulaires

Questions fréquentes

Quelles propriétés CSS font le glassmorphism ?

Quatre éléments suffisent : un fond semi-transparent (rgba), backdrop-filter: blur() pour flouter l’arrière-plan, une fine bordure semi-transparente et une ombre douce. border-radius arrondit le tout. Cet outil écrit les cinq dans une seule règle.

Pourquoi la même ligne est-elle écrite deux fois, avec -webkit- ?

Pendant des années, Safari ne connaissait backdrop-filter que sous le nom -webkit-backdrop-filter ; le nom sans préfixe n’est arrivé qu’avec Safari 18 (2024). Les iPhone et Mac plus anciens ont besoin des deux lignes. Un navigateur ignore la ligne qu’il ne connaît pas : le doublon ne gêne pas.

Comment obtenir un verre fumé sombre ?

Saisissez une couleur de verre sombre comme #0f172a, réglez l’opacité entre 30 et 50 % et laissez la bordure vers 10 %. Mettez le texte de la carte en blanc.

Que fait le bouton Télécharger ?

Il enregistre l’aperçu en PNG de 1200×800 pixels. Pour le code, utilisez Copier le résultat. Le flou de l’aperçu est dessiné avec le filtre de canevas du navigateur ; un ancien navigateur sans ce filtre peut afficher l’aperçu net, sans effet sur le CSS.