Générateur de Glassmorphisme

background-filter : flou() est la propriété CSS derrière l'aspect en verre dépoli - un panneau translucide qui brouille tout ce qui bouge derrière lui plutôt que de simplement estomper une couleur plate. Le problème, c'est qu'il est presque impossible de juger de la qualité du flou par rapport à un échantillon statique ; il n’est convaincant que lorsque quelque chose bouge réellement en dessous, comme ce serait le cas sur une vraie page avec du contenu, une vidéo ou un héros animé. Ce générateur place la carte d'aperçu sur un arrière-plan véritablement animé au lieu d'un arrière-plan fixe, de sorte que ce que vous voyez en faisant glisser les curseurs correspond à ce que les visiteurs vivront réellement.

L'arrière-plan est une véritable animation CSS : un grand dégradé linéaire peint à 400 % de la taille de l'élément, avec @keyframes déplaçant sa position d'arrière-plan d'avant en arrière sur une boucle - pas de boucle d'animation JavaScript, pas de canevas, juste la même technique continue de position d'arrière-plan utilisée dans les sections de héros de production. Le flou, la couleur et l'opacité de la teinte, la couleur/opacité/largeur de surbrillance des bordures, le rayon des coins et la douceur des ombres déterminent tous les styles dynamiques de la carte flottante, et la boîte CSS copiable reflète exactement les mêmes valeurs.

Tous les navigateurs ne prennent pas en charge le filtre de fond, donc le générateur émet également un véritable bloc @supports not (backdrop-filter: blur(1px)) — pas un geste symbolique, mais une règle de secours avec sa propre couleur d'arrière-plan calculée à partir de votre opacité de teinte réelle. Étant donné que la translucidité sans flou semble nettement pire (quoi que ce soit derrière elle apparaît sans flou), la solution de repli élève automatiquement le canal alpha au-dessus de l'opacité de la teinte choisie, et un commentaire dans le CSS généré explique exactement pourquoi et de combien.

Tout est calculé et rendu dans votre propre navigateur : pas de téléchargement, pas de compte, pas d'aller-retour sur le serveur. Copiez le CSS une fois que la carte semble correcte, déposez-la sur n'importe quel élément que vous souhaitez placer au-dessus d'une photo, d'une vidéo ou d'un dégradé, et conservez le bloc @supports afin que les navigateurs plus anciens obtiennent toujours une carte lisible et plus opaque au lieu d'une carte à peine visible.