Générateur de glassmorphism CSS

Le générateur de glassmorphism CSS est un éditeur visuel pour le style d'interface utilisateur en verre dépoli, où une surface translucide est floue tout ce qui se trouve derrière. Vous ajustez le flou de fond, remplissez la transparence, la saturation, la couleur de la teinte et le rayon d'angle avec des curseurs, regardez une mise à jour d'aperçu sur un fond coloré et copiez le CSS exact qu'il produit.

Glassmorphism repose sur la propriété de fond-filtre, qui applique un flou au contenu derrière un élément plutôt qu'à l'élément lui-même. Combiné à un fond semi-transparent, à une bordure capillaire et à une ombre douce, il produit le look de verre superposé popularisé par les systèmes d'exploitation modernes. Obtenir l'équilibre à la main est délicat, de sorte que cet outil gère chaque valeur et génère un bloc propre et copiable.

Tout s'exécute dans votre navigateur Choisissez un préréglage comme Frosted, Dark ou Vibrant, affinez les curseurs et copiez le CSS - y compris le filtre de toile de fond préfixé - webkit pour une prise en charge plus large. Pas de compte, pas de téléchargements et il continue de fonctionner hors ligne une fois la page chargée.

L'effet dépend de deux propriétés qui fonctionnent ensemble, et il échoue silencieusement si l'une ou l'autre manque. Le filtre arrière brouille tout ce qui se trouve derrière l'élément, il a donc besoin d'une couleur de fond partiellement transparente pour transparaître : à pleine opacité, il n'y a rien à voir, et sans aucun arrière-plan, la surface disparaît. Il a également besoin de quelque chose derrière qui mérite d'être flou, c'est pourquoi l'effet ressemble à un panneau plat sur un fond uni et prend vie sur une photographie. Deux coûts pratiques. Le flou de fond est l'une des choses les plus coûteuses à composer, en particulier sur une grande surface ou lors du défilement. Et le texte sur une surface translucide.