# The Best Liquid Glass UI Libraries in 2026 > 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. *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.* Updated November 2026. Source: https://www.exodeui.com/best-liquid-glass-ui-libraries/ 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. ## Quick picks - 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** ## The 5 best liquid glass options for the web ### 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: Convincing refraction and edge highlights; Configurable elasticity and aberration; MIT licensed and easy to drop in Cons: Safari and Firefox support the effect only partially; Heavy if used on many elements at once ### @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: More physical parameters to tune; Good for a hero element; MIT licensed Cons: Expensive to initialise and re-render; Not practical for many instances ### 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: Fits Tailwind projects; No WebGL required; Small and readable source Cons: Limited documentation; Fewer visual controls than larger libraries ### 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: Consistent treatment across components; Includes form controls, not just cards; MIT licensed Cons: Opinionated visual style; Small community ### 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: Very cheap to render; Broad browser support; Easy to theme and to respect contrast settings Cons: No refraction or chromatic aberration; Blur can still be expensive on large surfaces ## 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. ## Frequently asked questions ### What is the best liquid glass library for React? liquid-glass-react is the most established for a single convincing element. Creativoma's component fits Tailwind projects, and @specy/liquid-glass-react gives more physical controls at a higher performance cost. ### Does liquid glass work in Safari and Firefox? Partly. The displacement effect that makes it look like glass is not fully supported in Safari and Firefox, so those browsers usually show a blur with less edge distortion. Design the fallback, not just the Chrome version. ### Is liquid glass accessible? It can be, but contrast is the risk. Keep text on a tinted surface, avoid thin type over busy backgrounds, and test with increased contrast settings. Respect reduced transparency where the platform exposes it. ### Can I do liquid glass with CSS only? You can do a convincing frosted glass with backdrop-filter, a border and an inset highlight. Real refraction and chromatic aberration need SVG filters or WebGL, which is what the libraries add. ### Will liquid glass slow down my site? It can. Backdrop blur is expensive, especially on large or many elements. Use it sparingly and test on a mid-range phone rather than a desktop browser. ## Related - [Micro-interaction tools](https://www.exodeui.com/best-micro-interaction-tools) - [UI sound and motion tools](https://www.exodeui.com/best-ui-sound-and-motion-tools) - [Web performance animation tools](https://www.exodeui.com/best-web-performance-animation-tools) - [Tailwind animation tools](https://www.exodeui.com/best-tailwind-animation-tools) - [Web animation tools](https://www.exodeui.com/best-web-animation-tools)