Qu'est-ce que le générateur de verre 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.
En tant que générateur CSS de glassmorphisme, il part du préréglage Frosted, et le bloc copié pour ce préréglage se lit comme suit : arrière-plan : rgba (255, 255, 255, 0,2) ; filtre de fond : flou (10 px) saturé (120 %) ; la même valeur que -webkit-backdrop-filter ; border-radius : 16 px ; border : 1 px solid rgba (255, 255, 0, 18) et fond de boîte-ombre (20, 20.
Comment utiliser le générateur de verre CSS ?
Choisissez un préréglage
Partez de givré, clair, sombre, vibrant ou subtil pour obtenir un aspect de verre équilibré, puis affinez-le pour correspondre à votre design.
Accordez le verre
Faites glisser le flou de fond, la transparence et les curseurs de saturation, choisissez une couleur de teinte et définissez le rayon d'angle. L'aperçu est mis à jour en direct sur une toile de fond colorée afin que le flou soit visible.
Basculer la frontière
Activez ou désactivez la bordure des cheveux. Une subtile bordure blanc translucide de 1px vend le bord du verre, en particulier sur des fonds plus sombres.
Copiez le CSS
Copiez le bloc généré - arrière-plan, filtre de toile de fond (avec préfixe - webkit), border-radius, border et shadow - et collez-le sur votre carte ou votre panneau.
Principales caractéristiques
Contrôle du flou de fond
Un curseur de flou dédié entraîne le filtre de fond, qui gèle tout ce qui se trouve derrière l'élément - le noyau de l'effet verre
Style de surface complet
La transparence, la saturation, la couleur de la teinte, le rayon d'angle et une bordure en option vous permettent de composer le look de verre exact
Aperçu en direct
L'aperçu se situe sur un dégradé coloré afin que vous puissiez voir le flou de fond fonctionner, se mettant à jour instantanément au fur et à mesure que vous modifiez
Sortie préfixée
La sortie comprend à la fois le filtre de fond et le préfixe de filtre de fond -webkit-dossier, de sorte que l'effet fonctionne sur Safari et d'autres navigateurs WebKit.
Frequently Asked Questions
Related Tools
CSS Filter Generator
Apply blur, brightness, contrast, grayscale, sepia, hue-rotate and more with live sliders and a preview, then copy production-ready CSS filter code.
CSS Transition Generator
Build a CSS transition from property, duration, timing function and delay with a live hover preview, then copy production-ready code. Supports multiple layers.
CSS Gradient Generator
Create beautiful CSS gradients with live preview
CSS Text Shadow Generator
Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity - build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.
Comments
0 comments
No comments yet. Be the first to share your thoughts!