Générateur CSS glassmorphism

Réglez le flou, la transparence, la bordure et l'ombre pour créer un effet de verre dépoli (glassmorphism), puis copiez le CSS généré. Rendu prévisualisé en direct dans votre navigateur, aucune donnée envoyée à un serveur.

Couleur de base

Flou : 12px

Opacité du fond : 0.25

Opacité bordure : 0.3

Arrondi : 16px

Ombre portée

Carte en verre

Code CSS

.byteryo-glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

Comment ça marche

Le glassmorphism combine trois propriétés CSS : un fond semi-transparent, un flou d'arrière-plan (backdrop-filter: blur()) qui dépolit ce qui se trouve derrière l'élément, et une fine bordure claire qui simule un reflet sur le bord du "verre". Ajustez les curseurs pour trouver l'équilibre entre lisibilité du texte et effet visuel, puis copiez le CSS pour l'appliquer à vos cartes, barres de navigation ou fenêtres modales.

Le glassmorphism fonctionne-t-il sur tous les navigateurs ?

La propriété backdrop-filter est supportée par tous les navigateurs modernes (Chrome, Firefox, Safari, Edge), le code généré inclut le préfixe -webkit-backdrop-filter pour une meilleure compatibilité avec Safari. Sur de très anciens navigateurs, l'élément reste visible mais sans l'effet de flou.

Sur quel type de fond cet effet est-il le plus visible ?

Le glassmorphism est surtout visible sur un fond avec du contraste ou de la couleur (dégradé, image, illustration) placé derrière l'élément : sur un fond uni et clair, l'effet de flou reste discret. Testez toujours la lisibilité du texte posé sur l'élément en verre avant de l'utiliser dans une interface réelle.

Génération et prévisualisation 100% locales : le CSS est calculé dans votre navigateur à partir de vos réglages, sans aucun envoi de données.