background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);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 fonctionne dans votre navigateur. Choisissez un préréglage comme givré, sombre ou vibrant, affinez les curseurs et copiez le CSS, y compris le filtre de toile de fond préfixé -WebKit-Préfixé pour un soutien plus large. Aucun compte, aucun téléchargement, et il continue de fonctionner hors connexion une fois la page chargée.
Partez de givré, clair, sombre, vibrant ou subtil pour obtenir un aspect de verre équilibré, puis affinez-le pour correspondre à votre design.
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.
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 bloc généré - arrière-plan, filtre de fond (avec préfixe -webkit), rayon de bordure, bordure et ombre - et collez-le sur votre carte ou panneau.
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 de verre
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
L'aperçu se situe sur un dégradé coloré afin que vous puissiez réellement voir le flou de fond fonctionner, se mettant à jour instantanément au fur et à mesure que vous modifiez
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.
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Create beautiful CSS gradients with live preview
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
0 comments
No comments yet. Be the first to share your thoughts!