liquidGL is a real-time liquid glass engine for the modern web. True refraction, chromatic aberration and fluid distortion, composited live on the GPU with WebGPU and WebGL. One script.Open-source.
Refraction, with blur and light responses that feel natural, react like glass and are exceptionally performant. Tuned for realism.
liquidGL is free to use
But it’s not free to build. We built this library so that everyone can use modern UI aesthetics to the web. If you can, please support us.
Browse liquidGL's powerful API that supports granular control, real-time property updates and more.
Built for production.
Draggable
Give what you can
One-timeconst lens = liquidGL({ target: '.liquidGL', snapshot: 'body', resolution: 2.0, engine: 'auto', zIndex: undefined, content: undefined, refraction: 0.01, aberration: 0, bevelDepth: 0.08, bevelWidth: 0.15, frost: 0, shadow: true, specular: true, reveal: 'fade', tilt: false, tiltFactor: 5, tiltEase: 400, draggable: false, interaction: 'none', interactionStrength: 0.5, interactionRadius: 0.35, interactionViscosity: 0.65, magnify: 1, tint: null, helper: false, on: { init: () => {} }});lens.destroy();Selects which elements become liquid lenses. Accepts any valid CSS selector, so one call spins up a single hero pane or an entire grid.
Chooses the root element captured for the background snapshot the lens refracts - defaults to the whole page.
Scales the size of the captured background snapshot relative to the document, trading texture memory for sharpness.
Forces a specific rendering backend, or lets liquidGL pick the best one available for the browser.
Pins the lens canvas to an explicit stacking order when it needs to sit above or below specific page content.
Points the lens at a different element whose children are composited crisp and undistorted on top of the refracted glass, instead of the target's own content.
Controls how aggressively light bends through the lens - from a subtle sheen to a deep, glassy pull.
Splits colour at the lens edge like real optics, dialled from clinical to cinematic.
Sets how deep the lens edge appears to cut into the glass, shaping its 3D profile.
Sets how wide the bevel band is around the lens edge, from a thin rim to a broad curve.
Diffuses the scene behind the glass while specular highlights keep the surface alive.
Toggles the soft drop shadow cast by the lens onto the content beneath it.
Toggles the live specular highlight that tracks light across the glass surface.
Controls how the lens appears on load - a soft fade-in, or an instant, un-animated reveal.
Lets the pane rotate in 3D as the cursor or touch point moves across it, easing back flat on hover-out.
Scales how strongly the lens reacts to cursor and touch position, in degrees of rotation.
Sets how quickly the tilt response settles, in milliseconds.
Lets users pick up any pane with mouse or touch and move it freely, staying wherever it's dropped.
Turns on a fluid ripple that follows the pointer across the glass, displacing the surface as it moves.
Sets how far the surface displaces in response to pointer speed when the fluid interaction is active.
Sets the reach of the fluid displacement effect around the pointer, relative to the lens size.
Sets how thick the glass feels when the fluid interaction moves - higher values follow and settle slower, like real liquid.
Scales the refracted content under the lens independently of its on-screen size.
Infuses the glass with colour, composited through every layer beneath it.
Loads a separate dev GUI for live-tweaking every option in real time - requires liquidGL-helper.js to be imported.
Hooks into the lens lifecycle - fire your own code when it initialises or when a drag starts, moves and ends.
Tears down a single lens - restoring its original styles, removing its listeners and freeing its GPU resources - without touching any other lens sharing the same canvas.
