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

• Fournit une méthode pour créer un effet de verre haute résolution avec du code CSS
• Applique des filtres visuels comme blur, luminosité (brightness), saturation (saturate) ainsi que des ombres multicouches
• Utilise des pseudo-elements pour produire des effets de calques avant/arrière et de texture
• Peut être appliqué et personnalisé sur diverses interfaces avec une seule classe CSS concise
• Pratique pour introduire rapidement un effet de verre haute résolution moderne dans des projets web

---

Introduction

Ce code CSS est spécialement conçu pour générer un effet de verre haute résolution dans une interface web. Il permet un rendu plus fin et plus profond que les effets de glassmorphism classiques, et il suffit d’appliquer une seule classe CSS pour visualiser intuitivement le résultat.

Contenu principal

• La classe .glass3d combine divers filtres visuels comme blur (32px), luminosité (0.85), saturation (2.5), ainsi que l’ajout de couleur et de texture de bruit
• Une composition en plusieurs niveaux de box-shadow reproduit une sensation de verre réellement en volume
• Le pseudo-élément ::before superpose backdrop-filter, couleur et image de fond bruitée pour créer transparence d’arrière-plan et texture en relief
• Le pseudo-élément ::after ajoute une ombre interne (inset) pour donner l’impression que la lumière se reflète sur une véritable surface en verre
• La séparation via z-index structure l’affichage pour éviter les conflits entre calques d’effets
• Le sélecteur .glass3d > * garantit que le contenu des éléments enfants reste toujours au premier plan

Contexte d’utilisation et avantages

• Permet de créer une interface à effet de verre moderne et tendance avec une seule classe CSS, sans bibliothèque ni dépendance externe
• Très utile pour les développeurs frontend web, car il s’applique et s’étend facilement à des systèmes de design UI, cartes, pop-ups et boutons
• Grâce à l’utilisation de véritables images de motif pour la texture, à différentes combinaisons de couleurs et à des effets d’ombre en plusieurs étapes, cette approche offre davantage de profondeur et de nuances que les techniques de glassmorphism classiques

[GN⁺]

Discussion Hacker News

• J’ai créé une version qui applique un véritable effet de réfraction aux éléments de la page en JavaScript, ça vaut le coup d’y jeter un œil : https://real-glass.vercel.app/

• Cet effet a la limite de ne flouter que les pixels situés juste derrière la surface ; je recommande l’article de Josh Comeau qui explique très bien ce phénomène (https://www.joshwcomeau.com/css/backdrop-filter/#the-issue) ainsi que la discussion Hacker News (https://news.ycombinator.com/item?id=42302907). C’est un point assez important si l’arrière-plan bouge, mais en général peu important s’il est fixe.

  • J’ai lu le très bon article de Josh et essayé de suivre le tutoriel pour l’implémenter, mais j’ai rencontré un problème avec le border-radius via un masque SVG. Ça fonctionnait bien sur un élément codé en dur, mais je réfléchis encore à une manière de l’utiliser dans toute une bibliothèque de composants où le border-radius change selon la marque ou les container queries.
  • La solution de Josh donne aussi intuitivement l’impression qu’il y a quelque chose qui cloche : elle suppose que les éléments autour sont faits d’un matériau lumineux, alors que je ne pense pas que ce soit une propriété physique de base du « material » sur le web. J’ai plutôt tendance à considérer qu’un material ressemble fondamentalement davantage à du papier.

• C’est plutôt joliment réalisé, mais sans l’effet de réfraction du verre, on perd la forte séparation visuelle en couches de Liquid Glass. Quand on regarde les ressources de design de Material, on voit qu’elles insistent sur le fait qu’une app doit être composée de couches 3D cohérentes en mouvement. Mais en pratique, si on l’implémente en 2D et que tous les éléments se mélangent, il devient très difficile de distinguer les couches ; il arrive souvent que les gens ne trouvent pas les boutons d’action dans les coins. Le mouvement aide à différencier le chrome du contenu, mais visuellement ça ne ressort pas beaucoup. À mon avis, le plus grand atout de Liquid Glass, c’est l’edge distortion : cela crée, quand le contenu bouge, un mouvement non linéaire immédiatement perceptible par l’œil humain. Quand il y a du mouvement, la séparation des couches devient plus nette. Or cet élément essentiel de réfraction manque ici. Implémenter l’edge distortion avec des filtres SVG n’est pas simple, et au final c’est un travail assez complexe ; la décomposition étape par étape ici permet de mesurer la complexité : https://atlaspuplabs.com/blog/liquid-glass-but-in-css/…. J’ai aussi trouvé une collection CodePen Spark qui rassemble plusieurs tentatives d’implémentation de Liquid Glass, ainsi qu’une bonne référence réalisée avec du SVG codé en dur : https://codepen.io/spark/453 https://codepen.io/lucasromerodb/pen/vEOWpYM

  • Je pense qu’Apple a créé avec Liquid Glass une sorte de fossé défensif intelligent : n’importe qui peut facilement en faire une version bon marché, mais il est extrêmement difficile de bien le faire au point que ça paraisse authentique. Nous voyons du vrai verre tous les jours, donc nous distinguons intuitivement le « vrai » du « faux ». Du coup, les imitations se remarquent, et Apple peut préserver cette « impression premium ».
  • Je trouve l’edge distortion de Liquid Glass vraiment superbe, donc je compte absolument en refaire une version un jour. Mon projet en cours met l’accent sur des détails soignés, la compatibilité navigateur, et la restitution de matériaux sans utiliser de vraie 3D. Et je suis d’accord : l’effet ressort davantage quand les couches se déplacent sur un fond fixe. Le site de démo que je développe en ce moment intègre cet effet, même s’il n’est pas encore terminé. Merci pour les bonnes références.
  • Je suis d’accord sur le fait que la réfraction du verre crée cette séparation visuelle en couches. Mais personnellement, je trouve l’effet de réfraction trop distrayant et parfois peu agréable selon le contexte. C’est bien un phénomène physique réel du verre, mais ce n’est pas forcément nécessaire. J’ai l’impression qu’on amplifie ici l’élément que j’aimais le moins dans le skeuomorphism. Pour situer, je préférais les designs d’avant iOS 7.

• L’effet en lui-même est sympa, mais je ne ressens pas vraiment un rendu « verre ». La différence la plus immédiate, c’est que la lumière ne réagit pas du tout au bevel. Je m’attendrais aussi à ce que la lumière se reflète dans le verre et influence l’éclairage et les couleurs ; un simple effet de blur ne suffit pas. Le verre peut aussi produire des ombres particulières, notamment des caustics, mais Apple ne semble pas être allé jusque-là non plus. Pour l’instant, l’ombre ressemble plutôt à un simple drop shadow, ce qui renforce une impression de carte plate plutôt que d’objet 3D. Ça passe à côté du cœur de la tendance récente. Ce genre d’effet est difficile à réaliser uniquement en CSS ; il serait probablement plus adapté de le faire tourner via des shaders sur le GPU.

  • Si ce n’est pas faisable en CSS, je me demande quelle serait la bonne approche. Je me demande aussi si l’on peut appliquer des effets de shaders GPU à des div ordinaires. Si on ne peut pas injecter directement des effets GPU dans du HTML de base, alors il vaudrait peut-être mieux créer un nouveau moteur de rendu via une sorte de canvas custom. Le HTML a de toute façon perdu son sens : on garde le texte dans des balises <p> et tout le reste sert à la pub. Autant ne laisser que les <p> et repartir sur quelque chose de complètement nouveau avec une meilleure intégration GPU.

• Je collecte ce genre d’exemples de design : https://github.com/swyxio/spark-joy
  Je recommande aussi quelques ressources liées :

  • https://ui.glass/generator/ : générateur CSS gratuit de style glassmorphism
  • frosted glass sticky header https://www.joshwcomeau.com/css/backdrop-filter/
  • exemples de pen glassmorphism codepen, dans leur contexte
  • exemple CSS d’effet blur + rotation

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

  • Merci d’avoir ajouté ce projet à la liste spark-joy.
  • Je trouve que Spark Joy est une ressource vraiment excellente.
  • J’ai trouvé un générateur de polices ASCII qui ne semble pas être dans spark-joy ; à la place, je recommande cet outil que j’utilise souvent : https://patorjk.com/software/taag/…

• Sur mobile, j’ai l’impression que l’utilisabilité aurait été bien meilleure s’il y avait eu une option pour masquer ou replier les boîtes. Les boîtes occupent tout l’écran, donc on voit mal l’effet à l’arrière. Cela dit, c’est intéressant, donc je réessaierai sur un grand écran. Ajouter une option pour masquer les boîtes aiderait beaucoup.

• On dirait que cela utilise une technique similaire à celle de mon implémentation de glass : https://news.ycombinator.com/item?id=42225481, en particulier avec une utilisation intensive du box shadow.

  • Ton projet est vraiment superbe. Ça me fait plaisir de voir que je ne suis pas le seul développeur à avoir utilisé plusieurs couches d’ombres pour donner de la profondeur. L’idée d’ajouter des Light Rays m’a particulièrement marqué.

• L’effet fonctionne bien comme arrière-plan web.

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

  • Remarque intéressante. Il n’y a aucun effet de scroll sur la page. J’aimerais bien savoir sur quel appareil, navigateur et type de réseau tu as constaté ça.
  • Sur mon appareil M4 avec 128 Go de RAM, ça fonctionne bien.

• Je trouve que c’est vraiment très bien fait. Je suis toujours surpris de voir qu’en infographie, il n’existe pas « une méthode spéciale », mais en réalité « cinq couches de trucs ». Le support cross-browser me semble aussi être un gros défi. Tu as une idée de ce qui consomme le plus de ressources ? Instinctivement, je dirais que c’est backdrop-filter.

  • Moi non plus, je n’imaginais pas qu’il faudrait autant d’astuces. La partie la plus lourde, c’est le traitement du blur de backdrop-filter. Plus la valeur de blur est élevée, plus le rendu doit examiner d’informations sur les pixels environnants. Un autre poste coûteux, c’est la mise à jour en temps réel de l’apparence du glass quand on scrolle ou quand l’arrière-plan vidéo change.
  • Parfois, même pour simplement « centrer quelque chose », il faut aussi recourir à « cinq couches de trucs ».