Tu l’as sûrement remarqué : les interfaces deviennent de plus en plus translucides, animées, presque “vivantes”. Le liquid glass s’impose comme la nouvelle esthétique UX/UI qui pousse encore plus loin le glassmorphism. Ici, la transparence n’est plus figée. Elle bouge, se déforme, réagit… un peu comme si ton interface était faite de verre liquide 🫧.
Pourquoi un tel engouement ? Parce que ce style crée immédiatement une sensation de profondeur et de premium. Il donne du relief à une page, renforce la hiérarchie visuelle et transforme une simple surface en matière fluide. Les designers y voient un moyen de rendre les interfaces plus immersives, plus sensorielles — sans forcément compliquer la navigation.
Dans cet article, on va regarder ensemble ce qui différencie vraiment le liquid glass du glassmorphism classique, comment l’utiliser dans tes projets, et quelles bonnes pratiques adopter pour éviter la surcharge. Bref, tout ce qu’il te faut pour intégrer cette tendance sans te perdre dans les reflets ✨
Liquid Glass : comprendre cette évolution du glassmorphism
Le liquid glass n’est pas qu’une variation esthétique : c’est une vraie évolution du glass morphism. Là où le glassmorphism proposait une transparence figée, presque “givrée”, le liquid glass introduit du mouvement, de la fluidité et une profondeur bien plus immersive. Tu passes d’un effet de verre statique à une matière qui vit avec ton interface.
Ce style joue énormément sur les gradients, les variations de flou et les transitions souples. Résultat : tu obtiens une interface premium, plus expressive, mais toujours lisible.
Le liquid glass répond à un besoin simple : rendre le digital plus “tangible” sans tomber dans la surcharge visuelle.
Liquid glass vs glass morphism : ce qui change vraiment
Si tu pratiques déjà le glass morphism, tu vas vite voir la différence.
Le glassmorphism CSS classique repose sur :
- un flou d’arrière-plan uniforme,
- une transparence légèrement givrée,
- des contours nets ou un léger glow.
Le liquid glass, lui, ajoute une dimension dynamique :
- une transparence qui change subtilement selon le mouvement,
- des reflets qui glissent comme sur une surface humide,
- une glass liquid transition qui rend l’interface plus organique.
Ce n’est plus juste un panneau translucide : c’est un élément vivant qui crée une vraie profondeur.
Les UI plus sensorielles (micro-mouvements, reflets, textures fluides) s’imposent clairement dans les tendances design 2025-2026.
Pourquoi le liquid glass séduit les designers en 2025
Parce qu’on cherche tous des interfaces plus premium, plus immersives… sans les rendre complexes. Et le liquid glass coche exactement ces cases.
Il apporte :
- un effet “haut de gamme” instantané,
- des interactions plus douces grâce aux animations,
- une hiérarchie visuelle renforcée,
- un design qui rappelle les UI d’iOS ou de produits Apple.
Quand tu construis une landing page, une UI SaaS ou un portfolio, ce style peut complètement changer la perception de ton produit. Voilà pourquoi on le voit de plus en plus dans les maquettes Figma et les interfaces réalisées avec des outils modernes.
👉 D’ailleurs, si tu veux voir comment donner un vrai relief visuel à une page, regarde ici : exemples de landing page.
Le succès du liquid glass montre que le design émotionnel prend de plus en plus de place dans l’UX.
Comment fonctionne le Liquid Glass côté technique
Le style Liquid Glass transforme une simple surface en matière vivante : la lumière se diffuse, les reflets se déplacent et la profondeur visuelle renforce la hiérarchie de ton interface.
En combinant flou, gradients et reflets subtils, tu obtiens une esthétique premium sans sacrifier la lisibilité. Bien dosé, cet effet devient un repère visuel fort, idéal pour des sections clés comme un hero, une mise en avant produit ou un bloc de storytelling.
Couplé à des micro-interactions fluides, le Liquid Glass donne une vraie sensation de “verre liquide” : au survol, la surface réagit comme si une goutte d’eau venait de frapper le fond, créant une réverbération lumineuse.
On pourrait croire que le liquid glass nécessite des animations complexes ou des frameworks lourds… mais pas forcément. En réalité, c’est surtout une évolution de ce que tu fais déjà avec le glassmorphism CSS. Tu joues avec la lumière, les flous, les déformations et les micro-transitions pour créer une matière translucide plus vivante.
Ce qui change réellement, c’est la façon dont ces effets se combinent : plus de gradients, plus de variations, plus de fluidité.
Du glassmorphism CSS au liquid glass : techniques et astuces
Si tu veux recréer un vrai effet liquid glass, voici les ingrédients principaux :
✔️ 1. Le blur dynamique
Tu connais déjà le fameux backdrop-filter: blur(…).
Dans le liquid glass, on joue souvent avec :
- des intensités de blur différentes selon l’état,
- des blurs animés,
- des variations selon le mouvement de la souris ou du scroll.
Ça donne immédiatement de la profondeur.
✔️ 2. Les gradients fluides
Finis les aplats classiques.
Le liquid glass utilise des gradients doux, mouvants, parfois animés, qui imitent les reflets du verre liquide.
✔️ 3. Les glass liquid transitions
Ce terme revient souvent dans les animations modernes.
Il s’agit de transitions où les éléments semblent se déformer, s’étirer ou se liquéfier pendant leur apparition/disparition. Rien de très lourd si c’est bien dosé.
✔️ 4. Les masques et reflets subtils
Pour donner ce côté “matière”, tu peux ajouter :
- des reflets animés,
- des zones légèrement plus brillantes,
- des masques en dégradé pour accentuer la profondeur.
Bref, tu prends la base du glassmorphism… mais tu la rends vivante ✨
Les interfaces 3D plates (2.5D) se combinent de plus en plus au liquid glass pour créer des UI quasi holographiques.
Liquid glass sur mobile : focus sur l’iPhone
Le liquid glass iPhone méritait une section à part, parce que beaucoup de designers s’inspirent directement des interfaces Apple.
Pourquoi ?
Parce que l’écosystème iOS utilise déjà des textures translucides très travaillées : flous subtils, couches superposées, transitions fluides… bref, tout ce qui a inspiré la tendance.
Sur iPhone ou iPad, le liquid glass fonctionne particulièrement bien grâce à :
- la densité d’écran élevée,
- les animations natives d’iOS,
- le rendu très propre des blurs et des gradients.
Résultat : les designers reprennent ces codes pour leurs apps, leurs dashboards ou leurs landing pages. Et ça marche.
L’iPhone a clairement servi de catalyseur à l’esthétique liquid glass — c’est l’un des rares cas où le mobile dicte une tendance UI globale.
Intégrer le Liquid Glass dans un projet : bonnes pratiques
Le liquid glass est séduisant, mais comme toute tendance forte, il peut vite devenir envahissant si tu l’utilises sans intention. Le but, ici, c’est d’amener de la profondeur et du premium… pas de transformer ton interface en aquarium 🫧.
Alors, voyons quand l’utiliser, comment le doser, et avec quels outils tu peux le mettre en place efficacement.
Quand l’utiliser (et quand éviter)
Le liquid glass donne du relief, mais il ne convient pas à toutes les situations.
Voici quand il fonctionne vraiment bien :
Cas d’usage parfaits
- Landing pages premium : idéal pour renforcer la perception haut de gamme.
- Interfaces SaaS modernes : donne un look “propre et futuriste”.
- Portfolios design : parfait pour mettre en avant une identité créative.
- Interfaces orientées iOS ou Apple-like : cohérence visuelle totale.
👉 Tu veux voir des exemples concrets de landing pages bien structurées ?
Regarde ceci : exemples de landing page.
À éviter si…
- Tu as beaucoup de texte très dense (lisibilité compliquée).
- Ton site vise la vitesse extrême (effets = coût GPU).
- Tu n’as pas une identité graphique compatible avec le flou/translucide.
Les designers utilisent de plus en plus le liquid glass en “touches”, comme accent visuel, plutôt qu’en blocs complets.
Outils pour créer des interfaces liquid glass
Bonne nouvelle : tu n’as pas besoin d’un arsenal compliqué pour créer un effet liquid glass propre et moderne.
Figma
- Idéal pour prototyper les effets
- Permet de gérer facilement gradients, blurs, masques
- Plugins utiles : Glass Morphism, Fancy Gradients
Framer
Si tu veux intégrer des animations liquides ou des transitions plus poussées, Framer est clairement dans son élément.
Il gère très bien les effets dynamiques et les interactions fluides. J’en ai parlé ici : Framer VS Webflow : le meilleur CMS ?
Webflow
Plus visuel, plus simple à prendre en main.
Parfait si tu veux faire du liquid glass léger, avec des blurs propres et quelques animations simples.
👉 Pour un comparatif clair Framer vs Webflow, tu peux lire l’article juste au-dessus.
CSS natif
Tu peux tout faire à la main :
- backdrop-filter: blur()
- mask-image
- linear-gradient()
- animations avec filter ou opacity
Avec un peu de pratique, le glassmorphism css devient un vrai terrain de jeu pour créer ton propre effet liquid glass.
Le meilleur outil, c’est celui qui te permet d’expérimenter… sans sacrifier la performance.
Conclusion — Liquid Glass : une esthétique qui redéfinit la profondeur du design
Le liquid glass marque un vrai tournant dans la manière dont on conçoit la transparence et la matière en UX/UI. Plus vivant que le glass morphism, plus immersif que les simples blurs, il permet de créer des interfaces qui respirent, qui réagissent et qui donnent une sensation de premium instantanée.
Si tu cherches à moderniser ton design, à donner du relief à une landing page ou à apporter une touche plus sensorielle à ton produit, le liquid glass est une piste à explorer. L’important, c’est de l’utiliser avec intention : une touche bien placée vaut souvent mieux qu’un panneau entier flou et animé.
À mesure que les écrans deviennent plus précis et que les animations deviennent plus fluides, cette esthétique a toutes les chances de s’imposer durablement dans les interfaces modernes.
Le liquid glass ne remplace pas le design minimaliste… il l’enrichit en lui donnant une nouvelle dimension.
FAQ – Style Liquid Glass et design UX/UI
Le style Liquid Glass est une évolution du glassmorphism classique : on garde l’idée de transparence, de flou et de reflets, mais on ajoute de la fluidité et du mouvement. Au lieu d’un simple panneau translucide, tu obtiens une matière qui semble presque vivante : le verre paraît liquide, les reflets glissent et la profondeur est renforcée.
Concrètement, le liquid glass combine blurs, gradients, reflets subtils et parfois des animations pour créer une expérience plus immersive, surtout sur des interfaces modernes (SaaS, apps, landing pages premium).
Le glassmorphism repose surtout sur un flou d’arrière-plan, une transparence givrée et quelques effets de lumière. C’est un verre “figé”.
Le Liquid Glass, lui, va plus loin :
- la transparence semble évoluer avec le mouvement,
- les reflets sont plus organiques, comme sur une surface humide,
- on utilise souvent des glass liquid transitions pour animer les éléments (apparitions, hover, scroll).
En résumé : le liquid glass donne une impression de matière vivante, là où le glassmorphism reste plus statique.
Tu peux créer un effet Liquid Glass en partant d’un glassmorphism css classique, puis en travaillant la lumière et le mouvement. Voici une base de style typique :
.liquid-glass {
background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.3);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}Ensuite, tu peux ajouter des animations de gradients, des reflets avec des pseudo-éléments, ou des transitions douces sur le hover pour donner cet effet “verre liquide”.
Pour voir comment intégrer ce type d’effet dans une page complète, tu peux t’inspirer de cet exemple de landing page.
Oui, le Liquid Glass fonctionne très bien sur mobile, et en particulier sur iPhone, où les écrans haute densité et les animations système rendent les flous et gradients très propres.
On parle souvent de liquid glass iPhone car beaucoup de designers s’inspirent directement des textures translucides d’iOS : panneaux floutés, couches superposées, transitions fluides… Tout cela a largement contribué à populariser cette esthétique.
Seule vigilance : surveille la performance. Trop de flous et d’animations complexes peuvent impacter la fluidité sur des appareils moins puissants.
Tu peux travailler le Liquid Glass avec plusieurs outils :
- Figma pour prototyper les effets (blurs, gradients, masques).
- Framer pour pousser les animations liquides et les interactions avancées.
- Webflow pour intégrer facilement des interfaces visuelles avec des effets de verre et des transitions.
Si tu hésites entre Framer et Webflow pour ton projet, tu peux lire cette comparaison détaillée : Framer vs Webflow.
Et si tu veux voir comment ces effets s’intègrent dans une structure de page complète, jette un œil à cet exemple de landing page.
