Générateur CSS de glassmorphism
Générez du CSS pour des panneaux en verre dépoli ou des surfaces néomorphes douces à partir de quelques curseurs.
Générateur CSS de glassmorphism
Créez une règle CSS complète et prête à coller pour un panneau en verre dépoli ou une surface néomorphe douce sans écrire aucune valeur à la main. Choisissez glassmorphism pour une carte translucide qui floute tout ce qui se trouve derrière — l'apparence utilisée dans les tableaux de bord modernes, les panneaux de connexion et les modales — ou neumorphism pour une surface qui semble être moulée à partir du même matériau que son arrière-plan, en utilisant une paire d'ombres douces opposées au lieu de la transparence.
Les options correspondent directement aux propriétés que l'outil écrit. En mode verre, l'opacité de la surface et l'intensité du flou contrôlent l'alpha d'arrière-plan et le flou backdrop-filter, tandis que l'épaisseur de la bordure et la brillance de la bordure définissent un bord fin et semi-transparent qui maintient le panneau lisible sur des arrière-plans chargés. La distance de l'ombre et la douceur façonnent l'ombre portée sous le panneau, et le commutateur de forme la bascule en une ombre enfoncée pour un aspect enfoncé. En mode neumorphism, les mêmes valeurs de distance d'ombre et de douceur créent une ombre claire et une ombre sombre calculées à partir de votre couleur de surface, élevées ou enfoncées selon la forme que vous choisissez. L'arrondi des coins et une variante en mode sombre s'appliquent aux deux styles.
Parce qu'une surface dépolie ou légèrement ombrée peut se situer dans une teinte intermédiaire difficile à lire avec du texte noir ou blanc, l'outil vérifie le contraste résultant et ajoute un court commentaire d'avertissement au-dessus du CSS quand aucune couleur de texte ne serait lisible confortablement au-dessus du WCAG AA — un rappel pour ajuster la couleur de la surface ou l'opacité plutôt qu'une simple hypothèse.
Tout s'exécute localement dans votre navigateur au fur et à mesure que vous bougez les curseurs — pas d'outil de conception, pas de compte et rien n'est envoyé à un serveur. Copiez le CSS directement dans votre feuille de style, téléchargez-le en tant que fichier .txt ou renvoyez le résultat à l'entrée pour continuer à l'ajuster.