Générateur de Glassmorphism
Créez le CSS de cartes en verre dépoli avec des réglages de flou, transparence, teinte, bordure et rayon, directement dans votre navigateur.
🔒 S'exécute entièrement dans votre navigateur — rien n'est téléchargéCréer une surface en verre dépoli
Le glassmorphism consiste à laisser l'arrière-plan transparaître à travers une surface translucide, tandis qu'un flou adoucit ce qui se trouve derrière. Le résultat peut paraître soigné et moderne s'il est utilisé avec retenue. Ce générateur de glassmorphism vous donne un contrôle direct sur les éléments essentiels : teinte, transparence, flou d'arrière-plan, opacité de la bordure, rayon et ombre. Lorsque vous ajustez les valeurs, la carte se met à jour sur un dégradé coloré afin que vous puissiez juger si l'effet de verre est visible sans rendre le contenu difficile à lire.
Le CSS généré comprend background, backdrop-filter, la propriété équivalente avec préfixe
WebKit, une bordure discrète, un rayon de bordure et une ombre. Ces déclarations suffisent pour une carte réutilisable, un panneau de navigation, une fenêtre modale, une surimpression hero ou un widget de tableau de bord. Comme l'effet est du pur
CSS, il n'y a aucune image à exporter ni traitement serveur. Le navigateur affiche l'aperçu et
le bouton de copie place le texte CSS dans votre presse-papiers.
Trouver l'équilibre entre transparence et lisibilité
L'erreur la plus fréquente en glassmorphism est de rendre la carte trop transparente. Une faible opacité peut paraître impressionnante sur un aperçu vide, mais les vrais titres, libellés et icônes ont besoin de suffisamment de contraste pour rester lisibles sur tous les arrière-plans. Augmentez l'opacité quand l'arrière-plan est chargé, réduisez-la quand il est simple, et utilisez la bordure pour détacher la surface de couleurs voisines. Le flou aide à réduire les détails derrière la carte, mais il ne remplace pas un test de contraste.
Où utiliser l'effet
Le verre dépoli convient surtout aux moments ciblés : une carte de tarifs sur un dégradé hero, une barre d'outils flottante, un résumé de profil ou une fenêtre modale au-dessus d'un visuel riche. Il devient brouillon lorsque tous les composants l'utilisent en même temps. Après avoir copié le CSS, testez-le dans la mise en page réelle et ajoutez un arrière-plan opaque de secours si vous prenez en charge d'anciens navigateurs ou des appareils très peu puissants. Une bonne carte en verre doit donner une impression de profondeur tout en laissant la hiérarchie de l'interface et le contenu parfaitement clairs.
Comment utiliser
- Choisir la couleur du verreSélectionnez la teinte qui se superpose à l'arrière-plan.
- Régler le flou et l'opacitéAjustez la transparence, le flou d'arrière-plan, l'intensité de la bordure et le rayon.
- Copier le CSSCollez les styles de carte en verre générés dans votre composant.