Générateur CSS pour un effet de verre haute résolution

 (glass3d.dev)
5 points par GN⁺ 2025-07-04 | 1 commentaires | Partager sur WhatsApp
  • glass3d generator est un outil qui permet de prévisualiser instantanément et de copier du CSS à texture de verre en modifiant les paramètres
  • Les principaux réglages se composent du blur, de la brightness et de la saturation de backdrop-filter, ainsi que de la couleur et du choix de texture
  • La couleur est gérée en HSL avec une valeur alpha ; la valeur d’exemple est hsl(189 80% 10% / 0.2)
  • Les textures disponibles sont rice paper, egg shell, ink jet, coarse et topology
  • Le CSS généré combine .glass3d, ::before, ::after et le z-index des éléments enfants pour séparer le filtre d’arrière-plan, la texture de bruit, l’ombre interne et la couche de contenu

Valeurs ajustables dans glass3d generator

  • Quand les paramètres sont modifiés, le résultat est immédiatement reflété dans l’interface elle-même
  • Le CSS finalisé peut être copié et utilisé
  • Les principaux paramètres sont les suivants
    • backdrop-filter
    • blur
    • brightness
    • saturation
    • color
    • texture

Structure du CSS généré

  • La classe .glass3d définit les variables CSS et la base des calques
    • --filter-glass3d : blur(32px) brightness(0.85) saturate(2.5)
    • --color-glass3d : hsl(189 80% 10% / 0.2)
    • --noise-glass3d : egg-shell.png de transparenttextures.com
    • Utilise position: relative, z-index: 4 et plusieurs niveaux de box-shadow
  • .glass3d::before applique le filtre d’arrière-plan et la texture
    • Utilise var(--filter-glass3d) pour -webkit-backdrop-filter et backdrop-filter
    • Les variables de couleur et de bruit sont respectivement utilisées dans background-color et background-image
    • Définit background-size: 100px et background-repeat: repeat
  • .glass3d::after ajoute une ombre interne de surbrillance
    • Utilise plusieurs valeurs inset box-shadow
  • .glass3d > * applique position: relative et z-index: 6 afin que le contenu apparaisse au-dessus

À lire aussi

1 commentaires

 
GN⁺ 2025-07-04
Commentaires sur Hacker News

  • Cette approche a le problème de n’appliquer le flou qu’aux pixels situés juste derrière la surface, ce qui est bien montré ici : https://www.joshwcomeau.com/css/backdrop-filter/#the-issue
    Ça vaut le coup de le lire avec la discussion suivante : https://news.ycombinator.com/item?id=42302907. Si l’arrière-plan bouge en dessous, le problème du flou limité aux pixels juste derrière devient assez important ; avec un fond statique, ce n’est généralement pas très grave.

    • J’ai lu l’excellent article de Josh et j’ai même reproduit le tutoriel, mais j’ai rencontré un problème sur la partie gestion du border-radius avec un masque SVG
      Ça fonctionnait bien sur des éléments codés en dur, mais je n’ai pas encore résolu comment le faire fonctionner dans une bibliothèque complète de composants où le border-radius change selon le branding du client et les container queries.
    • Même la solution de Josh paraît intuitivement incorrecte. Elle semble supposer que les éléments proches sont des sources lumineuses, alors qu’il est difficile de considérer que le « matériau » du web possède naturellement ce type de propriétés physiques
      Le matériau par défaut se rapproche plutôt du papier.
    • Il est difficile de dire quelle approche est la plus juste. La méthode de base approxime les objets situés juste derrière un verre givré, tandis que la méthode ajustée imite des objets beaucoup plus éloignés
      Pour moi, la version ajustée entre en conflit avec les indices de profondeur, ce qui la rend bien plus distrayante et plus fausse.

  • Le rendu est plutôt réussi, mais sans la réfraction du verre, on perd ce qui fait selon moi la principale contribution de Liquid Glass : cette forte sensation de séparation entre les couches
    Material propose d’excellentes ressources de design montrant en 3D latérale que les apps doivent être composées de couches cohérentes en mouvement. Mais une fois tout aplati en 2D, il devient très difficile de repérer où se trouvent les fonctionnalités. Les gens ratent très souvent les boutons d’action dans les coins
    Le mouvement aide un peu à distinguer le chrome du contenu, mais il y a trop peu d’éléments qui définissent visuellement l’ensemble. Le plus grand atout de Liquid Glass, à mon avis, c’est la distorsion des bords. Quand le contenu bouge, cela crée un mouvement non linéaire, et la vision humaine le capte immédiatement
    Les captures d’écran statiques ne sont pas toujours flatteuses, mais en mouvement, la séparation des éléments fonctionne bien mieux que tout ce que j’ai vu jusqu’ici. Il manque ici cet élément clé de réfraction, qui exploite fortement la sensibilité humaine au mouvement
    J’avais déjà vu une autre excellente démo web, mais je n’arrive plus à la retrouver ; à la place, cette démo est moins bonne visuellement et peu performante sur mobile, mais elle montre bien étape par étape à quel point ce travail est complexe. Reproduire la distorsion des bords uniquement avec des filtres SVG est une voie assez brutale : https://atlaspuplabs.com/blog/liquid-glass-but-in-css#breaki...
    J’ai aussi retrouvé une collection d’essais autour de Liquid Glass (CodePen Spark), et je trouve que le deuxième lien est un exemple très réussi, avec un SVG prédéfini et fortement codé en dur : https://codepen.io/spark/453 https://codepen.io/lucasromerodb/pen/vEOWpYM

    • Apple semble avoir construit avec Liquid Glass un fossé défensif assez malin. Il est facile d’en faire une version dégradée, mais ils ont choisi un effet très difficile à reproduire correctement
      Les gens voient du vrai verre tous les jours, donc ils ont une intuition de ce qui paraît authentique et juste. Du coup, les imitations semblent évidemment moins bonnes, et Apple peut conserver son image de produit « haut de gamme ».
    • Je suis d’accord sur le fait que la distorsion des bords de Liquid Glass est superbe, et j’ai l’intention d’essayer de la reproduire moi-même plus tard
      Dans le projet actuel, l’objectif était de créer un matériau à l’aspect soigné, cohérent entre navigateurs, et sans recourir à de la vraie 3D. Tu as aussi raison de dire que l’effet fonctionne mieux quand il se déplace sur un fond fixe. C’est ce que je fais sur le site de démo de la bibliothèque en cours, mais ce n’est pas encore prêt.
    • L’absence d’effet de réfraction est au contraire une bonne chose. Je trouve déjà le verre givré ambigu, alors les effets de réfraction, je les déteste vraiment. C’est beaucoup trop distrayant et, dans certaines situations, ça sera forcément laid
      Je sais que le vrai verre se comporte ainsi, mais je n’ai pas envie d’y prêter attention. On dirait qu’on a pris les pires aspects du skeuomorphisme pour les pousser deux fois plus loin, et je dis ça tout en préférant l’ère d’avant iOS 7.

  • C’est un bel effet, mais pour moi, ça ne donne pas l’impression de vrai verre
    La différence la plus immédiate, c’est que la lumière n’interagit pas avec le biseau. Je m’attendrais à ce que la lumière rentre à nouveau dans le verre et affecte aussi l’éclairage et les couleurs. Ajouter simplement du flou ne suffit pas
    Le verre peut aussi avoir ses propres ombres et des motifs de concentration lumineuse intéressants. Ici, on voit bien une ombre, mais elle ressemble à une simple drop shadow, donc l’ensemble évoque davantage une carte plate qu’un objet physique 3D faisant partie de ce nouveau flux
    Quoi qu’il en soit, ce n’est pas simple à imiter uniquement en CSS, et des shaders exécutés sur le GPU semblent mieux adaptés.

    • Si ce n’est pas faisable en CSS, je ne vois pas vraiment comment faire. Comment appliquer des effets de shader GPU à un div classique ? Si on ne peut pas appliquer d’effets GPU au HTML de base et qu’il faut les réserver à des éléments personnalisés comme un assemblage arbitraire de Canvas, alors autant recréer directement un tout nouveau moteur de rendu capable d’appliquer ces effets GPU
      Pour moi, le HTML est mort. Pour transmettre du texte, quelques balises suffisent ; tout le reste sert surtout à transformer les pages web en bombardements publicitaires. Donc autant repartir de zéro avec une balise <text> et une meilleure intégration GPU, et supprimer le reste.

  • J’ai créé une version JavaScript qui réfracte réellement les éléments de la page : https://real-glass.vercel.app/

    • Dans Safari, l’effet givré ne fonctionne pas

  • Je rassemble ce genre de choses : https://github.com/swyxio/spark-joy
    Parmi d’autres ressources, il y a un générateur CSS gratuit basé sur les spécifications de design glassmorphism https://ui.glass/generator/, un en-tête fixe en verre dépoli https://www.joshwcomeau.com/css/backdrop-filter/, ainsi que glassy glassmorphism sur codepen et in context

    .blur-and-rotate {  
border-radius: 20px;  
backdrop-filter: blur(20px) hue-rotate(120deg);  
-webkit-backdrop-filter: hue-rotate(120deg);  
}

  • C’est vraiment très bien fait. Je suis toujours surpris de voir que l’infographie ressemble moins à « une astuce bizarre » qu’à 5 astuces empilées
    Obtenir en plus une compatibilité entre navigateurs, c’est une difficulté supplémentaire. Je me demande quelle partie consomme le plus de ressources. Instinctivement, je dirais backdrop-filter

    • Oui, je ne pensais pas qu’il faudrait autant d’astuces pour l’implémenter
      Ton intuition est la bonne : la partie la plus gourmande en ressources, c’est le flou de backdrop-filter. Plus la valeur de flou est élevée, plus il faut « échantillonner » de pixels voisins avant le rendu
      Un autre facteur coûteux, c’est qu’il faut redessiner en permanence quand on scrolle ou quand un fond vidéo modifie l’apparence du verre
    • Parfois, même pour « centrer » quelque chose, il faut 5 couches d’astuces

  • On dirait que ça utilise des techniques proches de mon implémentation du verre : https://news.ycombinator.com/item?id=42225481
    En particulier l’usage très poussé de box-shadow me semble similaire

    • Le projet a l’air super. Ravi de voir que je ne suis pas le seul à creuser les ombres jusqu’à en empiler plus de cinq. L’ajout des Light Rays est particulièrement impressionnant

  • Petit problème : l’ombre entre le haut et la zone scrollable avec le toggle/le code disparaît quand on fait défiler vers le bas. J’ai l’impression qu’elle devrait être cachée au départ puis apparaître

    • Bien vu. Ce n’est pas un problème de fondu, c’est simplement que l’ombre sort de l’écran avec le scroll
      Ces box-shadow en « surplomb » ont été conçues pour être appliquées à l’intérieur d’un élément plutôt que comme une ombre portée vers le bas depuis un élément ; dans ce cas, j’ai réalisé qu’il fallait appliquer le second type d’ombre

  • Sur mon téléphone, le défilement du contenu est assez lent. Je me demande s’il y a un autre effet de scroll qui le ralentit volontairement, ou si c’est un effet secondaire de l’effet de verre

    • Intéressant, mais il n’y a aucun effet de scroll nulle part sur la page. Je serais curieux de savoir quel appareil, navigateur et niveau de connexion Internet tu utilises
    • Sur un M4 avec 128 Go de RAM, ça tourne bien

  • J’ai peut-être raté quelque chose, mais sur mobile ce serait bien plus utile si on pouvait masquer ou replier la boîte
    En l’état, elle prend tout l’écran et on voit à peine les effets derrière. Ça m’intéresse quand même, donc je retenterai plus tard sur un écran plus grand, mais une option pour masquer la boîte améliorerait beaucoup l’expérience

    • Je me demande si tu parles de la zone d’aperçu du code
      Dans la première implémentation, j’avais placé un petit rectangle de démo au-dessus de l’interface du générateur, mais même petit il prenait trop de place et rendait l’UI difficile à utiliser. Si on faisait scroller toute la page, les gens trouvaient frustrant qu’il faille rester tout en haut pour voir le rectangle en cours d’édition
      Cet outil est surtout pensé pour coder, donc je privilégie l’expérience desktop, et le mobile sert plutôt d’aperçu rapide et de preuve que ça fonctionne aussi sur mobile. Cela dit, si tu connais une UI similaire qui marche vraiment bien sur mobile, je veux bien voir le lien