Liquid Glass for the Web
An open-source React primitive with live backdrop refraction, customizable materials, shadcn installation, and browser fallbacks.
Customize
Tune the optical field, surface lighting, color separation, and interaction independently.
Chromatic Aberration
Edge Highlight
Refraction
Blur & Tint
Components
Source-owned compositions ready to install, adapt, and ship with the primitive.
Parallax Glass
Parallax Glass
Installation
Install via the shadcn Registry. The CLI copies the source into your app — dependencies included.
pnpm dlx shadcn@latest add https://parallax-glass.vercel.app/r/liquid-glass.jsonOpen-source React primitive
Liquid Glass built for the live web
Parallax Glass is a source-owned Liquid Glass component for React. It combines live backdrop refraction in Chromium with customizable material recipes and deliberate CSS fallbacks for Safari and Firefox. Install it through the shadcn Registry, inspect every line, and adapt it to your UI.
Live DOM backdrop
The Chromium path refracts the real rendered page without screenshots, canvas capture, or cloned content.
How the SVG pipeline works →React and shadcn
Use a typed React API or let the shadcn CLI copy the complete editable implementation into your project.
Explore the React component →Material customizer
Tune refraction scale, blur, chroma, tint, lighting, radius, and advanced engine controls visually.
Generate Liquid Glass JSX →Honest browser support
Keep the same component structure while each browser receives the strongest correct rendering path it supports.
Compare browser rendering →Liquid Glass for web developers
Is this a CSS glassmorphism effect?
It includes blur and tint, but Chromium also bends the live backdrop through independent SVG displacement maps. Safari and Firefox use the CSS material fallback.
Does it work with React and shadcn/ui?
Yes. The public primitive is a React component, and every registry item can be installed as source with the shadcn CLI.
Does it capture or duplicate the page?
No. The component does not screenshot, rasterize, clone, or replace the page content behind the glass.