Aller au contenu
EN

Générateur de glassmorphisme CSS

Créez un effet verre dépoli (glassmorphism) en CSS : flou, transparence, saturation, bordure et ombre, avec aperçu sur un fond coloré ou votre photo.

  • Gratuit
  • Sans inscription
  • Aucun fichier envoyé
  • Windows, Mac, Android, iPhone

Chargement de l'outil…

À propos de cet outil

Réglez un effet de verre dépoli (glassmorphism) en direct : intensité du flou, opacité et teinte du verre, saturation, bordure claire, arrondi et ombre. L'aperçu se fait sur des fonds colorés ou sur votre propre photo, et le code CSS inclut la version pour Safari.

Dans quels cas l'utiliser ?

Cartes et panneaux d'interface

Une carte en verre dépoli sur un fond coloré donne un rendu moderne et aéré, très utilisé pour les tableaux de bord et les pages d'accueil.

Barre de navigation transparente

Une barre de menu en verre laisse deviner le contenu qui défile dessous tout en restant lisible.

Fenêtres modales

Le flou de l'arrière-plan concentre l'attention sur la fenêtre sans couper complètement le visiteur de la page.

Mode d'emploi

  1. Choisissez un fond coloré ou votre propre photo.
  2. Réglez le flou, l'opacité, la teinte et la bordure du verre.
  3. Copiez le code CSS de la carte.

Comment ça marche

Le code combine un fond rgba() semi-transparent, backdrop-filter avec blur() et éventuellement saturate(), une bordure blanche translucide qui imite le reflet du verre, un arrondi et une ombre douce.

L'aperçu est rendu par votre navigateur avec exactement le même code : ce que vous voyez est ce que vos visiteurs verront. Votre photo de fond reste sur votre appareil.

Conseils pour un bon résultat

  • L'effet ne se voit que sur un fond contrasté : formes colorées, dégradé ou photo.
  • Un flou de 10 à 16 px et une opacité de 15 à 25 % donnent le rendu le plus classique.
  • Vérifiez la lisibilité du texte sur la carte : augmentez l'opacité si le fond est chargé.
  • Une saturation au-dessus de 100 % rend les couleurs vues à travers le verre plus vives.

Problèmes fréquents et solutions

Le flou ne s'affiche pas

backdrop-filter n'agit que si le fond de l'élément est transparent ou semi-transparent, et s'il y a quelque chose derrière lui.

Ça marche partout sauf dans Safari

Vérifiez que la ligne -webkit-backdrop-filter est bien présente : Safari en a besoin.

Le texte est difficile à lire

Augmentez l'opacité du fond, ajoutez une ombre au texte ou choisissez un fond moins chargé.

Questions fréquentes

Qu'est-ce que le glassmorphisme ?

Un style d'interface où les panneaux ressemblent à du verre dépoli : semi-transparents, ils floutent ce qui se trouve derrière eux. Il a été popularisé par macOS Big Sur et Windows 11.

Quelle propriété CSS crée l'effet ?

backdrop-filter: blur() floute l'arrière-plan derrière l'élément. Elle s'utilise avec un fond semi-transparent, sinon le flou est invisible.

Est-ce compatible avec Safari ?

Oui, avec le préfixe -webkit-backdrop-filter, déjà inclus dans le code produit. Tous les navigateurs récents prennent l'effet en charge.

L'effet ralentit-il la page ?

Le flou demande du calcul à la carte graphique. Sur quelques éléments, c'est imperceptible ; évitez-le sur de très grandes surfaces animées.

Recherches associées

Toujours bloqué ?

Posez votre question sur le forum : la catégorie, l'outil, la fiche de votre appareil et le résultat du test seront déjà remplis.