Comment reproduire l'effet Liquid Glass sur le web : CSS, SVG et WebGL
La bonne nouvelle ? Les technologies web modernes permettent déjà d'approximer l'essentiel de l'esthétique Liquid Glass, sans attendre les APIs natives d'Apple.
Voici les trois approches, du plus simple au plus avancé.
Approche 1 - CSS pur : le glassmorphism évolué
C'est la base. Combinée avec des dégradés et des ombres soignées, cette approche CSS couvre 70 % des cas d'usage Liquid Glass sur le web.
.liquid-glass {
background: rgba(255, 255, 255, 0.10);
backdrop-filter: blur(20px) saturate(1.8) brightness(1.05);
-webkit-backdrop-filter: blur(20px) saturate(1.8) brightness(1.05);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 20px;
box-shadow:
0 8px 40px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.20),
inset 0 -1px 0 rgba(0, 0, 0, 0.10);
}
.liquid-glass:hover {
background: rgba(255, 255, 255, 0.14);
transition: background 0.3s ease, box-shadow 0.3s ease;
box-shadow:
0 12px 50px rgba(0, 0, 0, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
@supports not (backdrop-filter: blur(1px)) {
.liquid-glass {
background: rgba(30, 30, 50, 0.88);
}
}
@media (prefers-reduced-transparency: reduce) {
.liquid-glass {
backdrop-filter: none;
background: rgba(20, 20, 40, 0.92);
}
}
Approche 2 - SVG filters : simuler la réfraction
La réfraction est l'effet le plus difficile à reproduire en CSS seul. Les filtres SVG (feDisplacementMap) permettent de distordre le fond de façon réaliste, comme du vrai verre.
<svg style="position:absolute; width:0; height:0" aria-hidden="true">
<defs>
<filter id="liquid-refraction" x="-20%" y="-20%" width="140%" height="140%">
<feTurbulence type="fractalNoise" baseFrequency="0.015" numOctaves="3" result="noise"/>
<feDisplacementMap in="SourceGraphic" in2="noise"
scale="8" xChannelSelector="R" yChannelSelector="G"/>
</filter>
</defs>
</svg>
Approche 3 - WebGL / Three.js : l'effet complet
Pour reproduire la réfraction physique temps réel d'Apple à 100 %, WebGL est incontournable. C'est l'approche la plus fidèle, mais aussi la plus coûteuse en performance.
- Three.js + shader GLSL : permet un effet de réfraction physique avec dispersion chromatique
- liquid-glass-studio.vercel.app : un générateur WebGL open source déjà disponible
- liquid-glass.pro : générateur CSS/HTML pour les intégrations React et Vue
Performance : backdrop-filter est GPU-intensif. Limitez-vous à 2-3 éléments actifs par page. Ajoutez toujours will-change: transform uniquement sur les éléments animés, pas en masse.
Outils et ressources prêts à l'emploi
