Liquid glass is the current name for an old idea with a new refinement. Glassmorphism gave us blurred translucent panels; the liquid version adds refraction, so the surface bends what is behind it rather than just blurring it. That difference is what makes it look expensive, and it is also where the entire performance cost lives.
266 components on 21st carry the glass tags. Here is what the effect is made of, and the three settings that decide whether it ships.
The three levels of the effect
Frosted. backdrop-filter: blur() with a translucent background and a light border. Cheap by the standards of this article, and enough for a navbar, a card or a modal backdrop. Glass Button by Hossain Jahed and Glass Blog Card by Moumen Soliman are this level.
Tinted and layered. Frost plus a gradient overlay, an inner highlight along the top edge, and a soft shadow underneath. This is where most of the perceived quality comes from and it costs almost nothing extra, because it is all paint. Glassmorphism Trust Hero by Hossain Jahed and Glassmorphism Portfolio are the assembled versions.
Refractive. The full liquid effect: an SVG displacement filter or a shader that distorts the backdrop, usually strongest at the edges where a real lens would bend most. Liquid Glass by Suraj Gaud is the general implementation, and Liquid Glass Button by Ali Imam is the most-bookmarked button in the whole catalogue. Apple Tahoe Liquid Glass Button is the platform-flavoured take.
What it costs
backdrop-filter is the most expensive commonly used CSS property, because the compositor has to sample everything behind the element and blur it, every frame the element or its backdrop moves. Three consequences follow.
Area matters more than count. One full-screen blurred panel costs more than six small ones. A blurred sticky header across a scrolling page is the worst common case, because the backdrop changes on every frame of every scroll.
Blur radius is not free. The cost scales with the radius, and beyond roughly 20px nobody can tell the difference. Cap it.
Refraction multiplies it. An SVG feDisplacementMap or a shader on top of a blur is two expensive passes. On a mid-range Android that is where the frame budget goes, and it is the reason to keep the refractive version for one hero element rather than a card grid.
Making it legible
Glass is a legibility problem wearing a design trend's clothes. The contrast ratio of text on a translucent panel depends on what is behind it, which changes as the page scrolls.
Three fixes, in order of how much they help. Add an opaque tint under the blur - background: rgb(255 255 255 / 0.7) rather than 0.1 - so the panel has a floor. Test over the busiest thing the page can put behind it, not over the calm screenshot. And keep body text off glass entirely: use it for chrome, navigation and single-line labels, not for paragraphs.
The fallbacks nobody ships
backdrop-filter is widely supported now, but it is still disabled in some privacy configurations and on low-power modes. @supports not (backdrop-filter: blur(1px)) with a solid background is three lines and it is the difference between a panel that degrades and one that becomes unreadable transparent text.
Under prefers-reduced-transparency, which exists precisely for this effect, drop to the solid version. And remember that a refractive filter animating on pointer movement is motion, so it needs the reduced-motion branch too.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| Plain CSS | Frosted and tinted, which is most of the effect | No refraction |
| SVG filters | Displacement without a WebGL context | Fiddly, and expensive at large sizes |
| A shader | The full liquid look with control over the falloff | A canvas, a runtime and a fallback |
| 21st | Finished buttons, heroes, cards and calendars in the style | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue. The 21st MCP covers the same ground without leaving the editor: ask Claude, Cursor or Codex for a glass component, get the previews inline, and let the agent write the file.
Frequently asked
- What is the difference between glassmorphism and liquid glass?
- Glassmorphism blurs what is behind the panel; the liquid version also refracts it, bending the backdrop the way a real lens would, usually strongest at the edges. That refraction is what makes it look expensive, and it is where the entire extra cost lives, because it adds a displacement pass on top of the blur.
- Is backdrop-filter bad for performance?
- It is the most expensive commonly used CSS property, because the compositor samples and blurs everything behind the element every frame the backdrop moves. Area matters more than count, so one full-screen panel costs more than six small ones, and a blurred sticky header over a scrolling page is the worst common case. Cap the blur radius around 20px, beyond which nobody can tell.
- How do you keep text readable on glass?
- Give the panel an opaque floor rather than a barely-there tint, test it over the busiest thing the page can put behind it rather than a calm screenshot, and keep body text off glass entirely. Use it for chrome, navigation and single-line labels, where the contrast ratio changing as the page scrolls does the least damage.
- What happens when backdrop-filter is unavailable?
- The panel becomes plain translucent, which usually means unreadable text over whatever is behind it. A @supports query with a solid background is three lines and fixes it. Also honour prefers-reduced-transparency, which exists for exactly this effect, and prefers-reduced-motion if the refraction animates on pointer movement.