WebGL glass-effect library for the web, apply realistic refraction, blur, and lighting to any HTML element with a single async init call.
What it does
LiquidGlass is a lightweight JavaScript/TypeScript library that applies realistic glass refraction, blur, chromatic aberration, and lighting effects to any HTML element using WebGL shaders. It captures DOM content behind each glass element, runs it through a multi-pass rendering pipeline, and compos
Real glass-morphism on the web has always been a CSS approximation: backdrop-filter: blur() with no refraction, no chromatic aberration, no physical bevel. LiquidGlass replaces that approximation with a multi-pass WebGL shader pipeline that samples actual DOM content, bends light through it, and composites the result in real time.
Apple's introduction of Liquid Glass across iOS 26, macOS Tahoe, and iPadOS 26 reset the bar for what interface materials can do. LiquidGlass (the library, by @ybouane) brings that physical quality to any web page, targeting any HTML element, without locking you into a native framework.
html-to-image. Static children are captured once and cached; data-dynamic children and <video> elements are re-captured every frame.Fourteen shader parameters are individually tunable via data-config JSON: blurAmount, refraction, chromAberration, edgeHighlight, specular, fresnel, distortion, bevelMode (biconvex pill or dome magnifier), tintStrength, saturation, brightness, cornerRadius, zRadius, and shadow controls. A MutationObserver watches data-config, so live updates cost nothing extra.
The structural rules are strict. Glass elements must be direct children of the root container; nesting is rejected at init. The root itself is never captured, so backgrounds must live as sibling elements inside it. Each instance opens its own WebGL context, and browsers typically cap concurrent contexts at around 16 system-wide, meaning dozens of simultaneous instances will break. init() is async and can take 100-500 ms on a cold page. Cross-origin images need crossorigin="anonymous" or they taint the canvas and disable the entire root's effect.
LiquidGlass is the most physically faithful glass-rendering library available for the open web today, per the README's own accounting of its pipeline. The tradeoffs are real: DOM rasterisation is expensive, the structural constraints are non-trivial, and the dirty-tracking system requires deliberate care. For a portfolio hero, a product landing page, or an OS-style UI shell, it earns its complexity. For a form-heavy SaaS dashboard with dozens of components, it probably does not.
Features
Field notes
Reviewed Jun 26, 2026
Best for
Builder outcomes
Watch out
Tested with
LiquidGlass is a lightweight JavaScript/TypeScript library that renders physically accurate glass effects, including refraction, Gaussian blur, chromatic aberration, Fresnel reflection, and multi-light specular highlights, on any HTML element using WebGL shaders. It captures the DOM content behind each designated glass element, processes it through a multi-pass rendering pipeline, and composites the result in real time. It was created by @ybouane and is available on npm and via CDN.
Install via npm with `npm install @ybouane/liquidglass`, or import directly from a CDN without a build step: `import { LiquidGlass } from 'https://cdn.jsdelivr.net/npm/@ybouane/liquidglass/dist/index.js'`. Call the async `LiquidGlass.init({ root, glassElements })` after the DOM and webfonts are loaded, it resolves once font prefetching and content pre-capture are complete, which can take 100-500 ms. Configure individual glass panels by setting `data-config` to a JSON string of options like `blurAmount`, `refraction`, and `floating`.
LiquidGlass is an open-source library available on GitHub at ybouane/liquidglass and published to npm as @ybouane/liquidglass. The sources do not mention any licensing cost, commercial tier, or usage restriction. It can be imported directly from CDN (jsdelivr) at no cost.
LiquidGlass is best for interfaces where the glass effect is a primary visual feature, such as portfolio hero sections, product landing pages, OS-style web shells, or interactive demos with rich backgrounds (images, video, animated canvas). Its dirty-tracking system short-circuits the render loop on static pages, so it is efficient when most content is stable. It is less suited to complex SaaS dashboards with many components, deep DOM trees, or dozens of concurrent glass panels.
CSS `backdrop-filter: blur()` is a fast GPU composite hint that blurs whatever is behind an element, but it cannot simulate refraction, chromatic aberration, Fresnel reflection, or bevel depth. LiquidGlass rasterises the actual DOM content behind each glass element and runs a multi-pass fragment shader, producing physically plausible light-bending, color fringing, and specular highlights that `backdrop-filter` cannot achieve. The tradeoff is complexity: LiquidGlass requires structural constraints (direct child elements, CORS-safe images), has a 100-500 ms async init cost, and is heavier than a single CSS property.
Glass elements must be direct children of the root container; nested glass is rejected at init with a console warning. Browsers typically cap WebGL contexts at around 16 system-wide, so spawning many LiquidGlass instances on one page will fail. Cross-origin images need `crossorigin='anonymous'` or they taint the canvas and disable the glass effect for the entire root. Webfonts must be fully loaded before `init()` is called, and `data-dynamic` content is re-rasterised every frame, which is expensive and should be used sparingly.
Open-source glassmorphism component library for shadcn/ui, 21 Apple-inspired glass UI components for Next.js and React, installed via the shadcn registry.
Best for Teams building Next.js or React apps that already use shadcn/ui and want a coherent glass aesthetic fastAnimated WebGL liquid-metal shader for React buttons and chips, one component, three presets, zero layout shifts.
Best for React devs who want a real-time WebGL metal ring on CTA buttons without a custom shader setup18 production-ready CSS transitions for web apps, plus an AI agent skill that applies them directly inside your project.
Best for Builders using AI coding tools like Cursor, Claude Code, or Copilot who want consistent, production-ready CSS transitionsDependency-free gallery of math-driven loading animations (rose, Lissajous, cardioid, and more) with formulas and copyable code for UI builders.
Best for Builders who want visually distinctive loading animations grounded in named mathematical curvesFree browser tool and Python package that converts images and videos into 13 art styles (ASCII, pixel art, voxel, halftone, LEGO, glitch, and more) with real-time effects and up to 4x export resolution.
Best for Designers creating stylized posters or visual assets using ASCII, pixel art, voxel, mosaic, halftone, glitch, or LEGO stylesVisual RAG pipeline that retrieves over screenshot tiles instead of parsed text, preserving tables, charts, and layout for more accurate document search.
Best for Builders doing RAG over documents where tables, charts, or layout carry meaning that HTML parsing silently drops