Liquid glass that bends the page behind it as you scroll
A CSS generator creates a liquid glass effect that visually bends the page content behind it as users scroll, offering a unique interactive design element for websites.
Background
- The page showcases a CSS-only "liquid glass" visual effect: a translucent panel that refracts (distorts) background content behind it, creating a realistic glass-like lens effect that responds to user scrolling.
- "Liquid glass" (or "glassmorphism") is a popular UI trend where interfaces mimic frosted or polished glass. This demo adds a dynamic refraction filter — a step beyond the static blur seen in typical glassmorphism designs.
- The demo is built entirely in CSS (specifically using `backdrop-filter` and custom scroll-driven animations), requiring no JavaScript for the distortion effect. This reflects a broader shift in web development: CSS now handles complex visual effects that previously demanded JS or WebGL libraries.
- CodeQuest is a learning platform for creative front-end development, focusing on experimental CSS, canvas, and WebGL techniques. This generator lets developers tweak parameters and export the effect for their own projects.