Générateur de glassmorphism
Réglez une carte en verre dépoli — flou, teinte, surbrillance de bordure, rayon des coins et ombre — prévisualisée en flottant au-dessus d'un fond véritablement animé, pour que la qualité du flou soit visible en mouvement.
🔒 Entièrement traité dans votre navigateur — rien de ce que vous saisissez ici n'est jamais téléchargé.
Résultat
backdrop-filter: blur() est la propriété CSS à l'origine de l'effet verre dépoli — un panneau translucide qui floute ce qui défile derrière lui plutôt que de simplement estomper une couleur unie. Le problème, c'est que la qualité du flou est presque impossible à évaluer sur un échantillon statique ; elle n'est convaincante que lorsque quelque chose bouge vraiment derrière, comme ce sera le cas sur une vraie page avec du contenu, une vidéo ou un hero animé. Ce générateur place la carte d'aperçu au-dessus d'un fond véritablement animé plutôt que fixe, de sorte que ce que vous voyez en déplaçant les curseurs corresponde à ce que vos visiteurs verront réellement.
Le fond est une véritable animation CSS : un grand linear-gradient défini à 400 % de la taille de l'élément, avec @keyframes qui déplace sa background-position en va-et-vient en boucle — pas de boucle d'animation JavaScript, pas de canvas, juste la même technique continue de background-position utilisée dans les sections hero en production. Le flou, la couleur et l'opacité de la teinte, la couleur, l'opacité et l'épaisseur de la surbrillance de bordure, le rayon des coins et la douceur de l'ombre agissent tous en direct sur les styles de la carte flottante, et le CSS copiable reflète exactement les mêmes valeurs.
Tous les navigateurs ne prennent pas en charge backdrop-filter, c'est pourquoi le générateur produit aussi un véritable bloc @supports not (backdrop-filter: blur(1px)) — pas un geste symbolique, mais une règle de repli dotée de sa propre couleur de fond, calculée à partir de l'opacité réelle de votre teinte. Comme la translucidité sans flou est nettement moins esthétique (ce qui se trouve derrière apparaît sans flou), le fallback augmente automatiquement le canal alpha au-delà de l'opacité de teinte que vous avez choisie, et un commentaire dans le CSS généré explique exactement pourquoi et de combien.
Tout est calculé et s'exécute dans votre propre navigateur : aucun envoi, aucun compte, aucun aller-retour serveur. Copiez le CSS une fois que la carte vous convient, appliquez-le à n'importe quel élément devant se superposer à une photo, une vidéo ou un dégradé, et conservez le bloc @supports pour que les navigateurs plus anciens affichent une carte lisible et plus opaque, plutôt qu'un élément à peine visible.