Liquid Glass implémenté en CSS

• Comment reproduire les effets clés du langage de design Liquid Glass dévoilé par Apple à la WWDC25 en combinant CSS et filtres SVG
• Implémentation pas à pas en CSS/SVG de plusieurs couches imitant un véritable matériau en verre, comme les Specular Highlights, Blur, Color Filter, Refraction, Edge/Ripple Distortion, Chromatic Aberration
• Les principaux effets s’appuient sur des techniques CSS/SVG avancées comme backdrop-filter, box-shadow, SVG DisplacementMap, Turbulence, ColorMatrix, Offset, Blend
• La compatibilité navigateur est surtout centrée sur Chrome ; dans Safari/Firefox, les filtres SVG ne fonctionnent pas, donc seuls Blur et Shadow sont appliqués
• Plus les effets sont complexes, plus l’utilisation du GPU est importante, avec un risque de baisse de performances s’ils sont abusivement utilisés dans toute l’interface ; il est donc recommandé de les réserver aux zones clés

---

Qu’est-ce que Liquid Glass ?

• Il s’agit du dernier langage de design d’Apple, qui vise des effets graphiques haut de gamme imitant un véritable verre, avec réflexion et réfraction de la lumière, variations de couleur et sensation de volume
• Il sert à ajouter de la profondeur et du dynamisme aux éléments d’interface, avec un rendu visuellement fluide évoquant une sensation physique tangible

Principales couches d’effet et méthode d’implémentation

1. Specular Highlights (reflets spéculaires du verre)

• L’ajout de reflets sur les bords du verre accentue la profondeur et le relief
• On superpose plusieurs inset box-shadow en CSS pour exprimer l’impression de lumière réfléchie selon différents angles

  box-shadow:  
      inset 10px 10px 20px rgba(153, 192, 255, 0.1),  
      inset 2px 2px 5px rgba(195, 218, 255, 0.2),  
      inset -10px -10px 20px rgba(229, 253, 190, 0.1),  
      inset -2px -2px 30px rgba(247, 255, 226, 0.2);  
  

• En s’appuyant sur le [Fresnel Effect], on ajuste naturellement l’intensité de la réflexion lumineuse

2. Blur (flou d’arrière-plan)

• Pour appliquer le flou uniquement au contenu derrière le verre, on utilise backdrop-filter: blur(20px);
• L’effet s’applique uniquement au contenu d’arrière-plan, et non à l’élément lui-même

3. Color Filter (accentuation des couleurs)

• En ajoutant des backdrop-filter comme contrast(80%) saturate(120%), on obtient des couleurs plus nettes grâce à une augmentation de la saturation et une réduction du contraste du contenu situé derrière le verre

  backdrop-filter: blur(20px) contrast(80%) saturate(120%);  
  

4. Simulation de la réfraction (Refraction)

• L’effet de réfraction qui donne l’impression que la courbure du verre déforme l’arrière-plan atteint vite les limites du CSS seul ; il est donc implémenté en combinaison avec des filtres SVG

• Displacement Map : en utilisant des dégradés SVG, on crée une carte de distorsion (Identity Map) qui compresse les pixels sur les bords et les étire au centre

  • Dans l’exemple SVG, les dégradés rouge/bleu définissent l’amplitude du déplacement des pixels sur les axes X/Y
  • En ajustant la rampe du dégradé, on conçoit un motif de compression sur les bords et d’expansion au centre
  • Le SVG est converti en Data URL puis chargé via feImage, avant d’être utilisé dans feDisplacementMap pour la transformation des coordonnées

• Ripple Distortion : la combinaison de feTurbulence (texture de bruit) et d’un feDisplacementMap supplémentaire permet de reproduire jusqu’aux micro-ondulations de la surface du verre

• Chromatic Aberration (aberration chromatique) : la combinaison de feColorMatrix, feOffset et feBlend sépare, décale puis recompose les canaux RGB pour imiter la dispersion lumineuse observable sur du vrai verre

Comment appliquer les effets CSS/SVG

• Après avoir défini un filtre SVG, on l’applique à un élément DOM via filter: url(#filterId);
• La chaîne de filtres qui combine tous les effets reproduit simultanément la texture d’un véritable panneau de verre, les déformations lumineuses et les variations de couleur

Compatibilité et points d’attention sur les performances

• Les filtres SVG de displacement ne sont correctement pris en charge que dans Chrome. Dans Safari, Firefox et d’autres navigateurs, les effets sont limités (il ne reste que Blur/Shadow)
• Si les éléments en verre sont nombreux ou animés, la charge GPU augmente fortement et les performances de rendu peuvent chuter
• En pratique, il est préférable de les utiliser uniquement sur certaines parties de l’UI à mettre en valeur, comme les zones Hero/Feature

Références et crédits

• Cette méthode d’implémentation s’appuie sur "A Deep Dive Into The Wonderful World Of SVG Displacement Filtering" de Smashing Magazine et sur la documentation officielle d’Apple sur Liquid Glass
• Le point clé est l’utilisation combinée de technologies web récentes comme SVG displacement, CSS backdrop-filter et box-shadow

[geek12356]

Ce que cette personne a réalisé semble plus naturel, je trouve.
https://v0.dev/chat/dynamic-frame-layout-1VUCCecq7Uy

[zabefofoon]

Ça ne s’applique pas dans Safari, apparemment.

[bobross0]

Ça reste encore un peu maladroit à implémenter sur le web haha