The Best Liquid Glass UI Libraries in 2026
Apple's Liquid Glass look spread to the web quickly, and most of the libraries that appeared are small community projects rather than mature design systems. That is fine for a hero button and risky for a checkout flow. Here is what actually works, and where a simpler blur is the better choice.
We make ExodeUI, which is not a glass-effect library. It appears here only for animating the states of glass controls, such as press and hover.
Use liquid-glass-react for a quick, convincing refraction effect on a React button or card. Use @specy/liquid-glass-react if you want a WebGL-style liquid simulation with more parameters. Use creativoma/liquid-glass for a Tailwind-friendly component with SVG displacement. For most interfaces, plain CSS backdrop-filter with a border and a highlight is cheaper and works everywhere. Test Safari and Firefox before shipping, because displacement effects are only partly supported there.
Quick picks by job
| If you need | Use |
|---|---|
| A convincing glass button in React | liquid-glass-react |
| More physical, configurable distortion | @specy/liquid-glass-react |
| Tailwind and SVG displacement | creativoma/liquid-glass |
| A wider set of glass UI pieces | react-glass-ui |
| Cheapest, most compatible approach | CSS backdrop-filter |
How we compared them
- Visual quality of the refraction, not just a blurred background
- Browser support and fallback behaviour
- Maintenance, licence and how much of your layout it takes over
The 5 best liquid glass options for the web
1. liquid-glass-react
Best for: A drop-in Apple-style glass button or card in React
- Platforms
- React
- Price
- Free and open source, MIT
- Output
- A React component
This is the best-known implementation: SVG displacement for edge bending, chromatic aberration and configurable elasticity, with hover and click behaviour. It looks convincing on a button or a small card. The README notes that Safari and Firefox only partly support the displacement, so the effect degrades to a blur there.
Pros and cons
- Convincing refraction and edge highlights
- Configurable elasticity and aberration
- MIT licensed and easy to drop in
- Safari and Firefox support the effect only partially
- Heavy if used on many elements at once
2. @specy/liquid-glass-react
Best for: A more physical simulation with depth and refraction controls
- Platforms
- React
- Price
- Free and open source, MIT
- Output
- A React component
This implementation treats the glass more like a material, exposing depth, segments, radius, refraction and dispersion. That gives a richer look and a higher cost: the README warns that initialisation is expensive and recommends memoising props and avoiding unnecessary remounts.
Pros and cons
- More physical parameters to tune
- Good for a hero element
- MIT licensed
- Expensive to initialise and re-render
- Not practical for many instances
3. creativoma/liquid-glass
Best for: Tailwind projects that want SVG displacement without WebGL
- Platforms
- React with Tailwind CSS
- Price
- Free and open source, MIT
- Output
- A React component using Tailwind classes
A smaller component that uses SVG filters (turbulence and displacement) with Tailwind for styling. It fits a Tailwind codebase more naturally than a standalone effect library. Being small also means fewer knobs and less documentation, so expect to read the source.
Pros and cons
- Fits Tailwind projects
- No WebGL required
- Small and readable source
- Limited documentation
- Fewer visual controls than larger libraries
4. React Glass UI
Best for: A set of glass cards, buttons and inputs rather than one effect
- Platforms
- React
- Price
- Free and open source, MIT
- Output
- React components
React Glass UI packages the look as a small component library: cards, buttons and inputs with blur, saturation, distortion and glow. It is useful when you want a consistent glass treatment across several elements instead of styling each one. The trade-off is that the visual style is opinionated.
Pros and cons
- Consistent treatment across components
- Includes form controls, not just cards
- MIT licensed
- Opinionated visual style
- Small community
5. CSS backdrop-filter
Best for: A light, fast glass surface that works almost everywhere
- Platforms
- Modern browsers
- Price
- Free, built into the browser
- Output
- CSS on your own elements
Most glass interfaces do not need displacement. A semi-transparent background, a blur, a subtle border and an inner highlight get 80% of the look with a fraction of the cost, and they behave predictably. Use the JavaScript libraries for the one hero element that needs real refraction.
Pros and cons
- Very cheap to render
- Broad browser support
- Easy to theme and to respect contrast settings
- No refraction or chromatic aberration
- Blur can still be expensive on large surfaces
You have read the list. The one we make is one click away.
Free Community plan. One open .exode file that runs in React, Vue, Svelte, Angular, Solid, React Native, SwiftUI and Flutter.
Also worth a look
Glass is a contrast problem first
Text on a blurred, semi-transparent surface loses contrast as the background changes. Check the worst case, not the pretty screenshot: a bright photo behind a light glass card can push text below accessible contrast. Add a solid tint behind text, or increase the surface opacity until the contrast holds.
Blur and displacement are not free
Backdrop blur forces the browser to composite what is behind the element, and displacement filters add another pass. A single glass bar in a sticky header is fine. Twenty glass cards in a scrolling list will drop frames on mid-range phones. Animate transform and opacity, not blur radius, and reduce the effect when the device is struggling.