Liquid Glass | Study 001

Liquid Glass

Visit on GitHub Discover Nordify
Nordify

The most accurate liquid glass on the web

Grainy concentric rings in blue, pink and orange
Soft blurred light in red, magenta and pale blue

Pure CSS, no WebGL

Drop into any site

Glowing gradient from deep red and blue into pink and yellow
Stepped contour bands from dark teal to pale peach

Open source. Ready to port.

Three files, no dependencies. Copy them into any site or framework, call one function, and the element turns to glass.

import { createLiquidGlass } from "./glass/liquid-glass";

createLiquidGlass(element, { radius: 30 });
Try it out

Questions

What is liquid glass?

A material look Apple introduced in 2025: translucent glass that bends and reflects whatever lies behind it. This study brings the effect to the web with standard CSS and SVG, so it works on top of any live page.

Which browsers support it?

Chrome, Edge, Arc, Brave and Opera show the full effect. Safari and Firefox do not run SVG filters inside backdrop-filter yet, so they get a clean frosted-glass fallback instead.

Does it slow the page down?

The expensive part happens once: the displacement maps are baked as small images and cached. While you scroll, the browser only re-runs the filter. Nothing is rebuilt, and the glass can change size without baking new maps.

Can I use it with React, Vue or Next.js?

Yes. It is plain TypeScript that works on any DOM element, without dependencies. The repository includes a step-by-step porting guide written so that an AI assistant can follow it, too.

Who made this?

Nordify, a software studio in Hamburg. We build websites, apps and AI tools, and publish open studies like this one along the way. This is Study 001.