Générateur de glassmorphisme
Créez des cartes d'interface en verre dépoli avec flou d'arrière-plan, transparence et bordures, puis copiez le CSS.
Carte en verre
Verre dépoli flottant au-dessus d'un fond éclatant.
—
Génère à la fois backdrop-filter et -webkit-backdrop-filter. Remarque : backdrop-filter n'est pas pris en charge par les anciens navigateurs (par ex. Firefox antérieur à 103) ; ajoutez un arrière-plan de repli opaque pour ceux-ci.
À propos de Générateur de glassmorphisme
Le générateur de Glassmorphisme construit l'effet de carte en verre dépoli: un panneau translucide qui floute tout ce qui se trouve derrière lui. Des curseurs contrôlent le flou et la saturation du backdrop-filter, la couleur de teinte du verre et sa transparence, la couleur et l'opacité de la bordure, le rayon des coins et une ombre extérieure — chaque changement est rendu en direct sur un fond vif pour que vous puissiez juger l'effet de façon réaliste.
Quatre préréglages de qualité — subtile, dépolie, vive et verre sombre — offrent des combinaisons éprouvées pour démarrer. Le préréglage sombre montre comment la même recette s'adapte aux interfaces sombres, où une bordure claire discrète fait l'essentiel du travail pour séparer le verre de l'arrière-plan.
Le CSS généré inclut à la fois backdrop-filter et le préfixe -webkit-backdrop-filter requis par Safari. Notez la mise en garde de compatibilité: les navigateurs plus anciens (par exemple Firefox avant la version 103) ne prennent pas en charge backdrop-filter, prévoyez donc un arrière-plan de secours solide pour eux.
Comment utiliser Générateur de glassmorphisme
- Partez d'un préréglage — subtile, dépolie, vive ou verre sombre — ou des valeurs par défaut.
- Ajustez le flou et la saturation du filtre d'arrière-plan.
- Réglez la couleur de teinte du verre et sa transparence.
- Ajustez la couleur de bordure, l'opacité de bordure, le rayon des coins et l'ombre de contour.
- Copiez le CSS — il inclut déjà la propriété préfixée -webkit- pour Safari.