Liquid Glass CSS

Compose a translucent surface from blur, tint, border, highlight, and shadow. Test it over a real background so the glass remains legible instead of becoming a decorative overlay.


Project board
Draft

Quarterly planning

Five action items are ready for review. Finance has signed off, and the client deck is in final review.

Open
7
Due
2
Team
5
Review queue
4 items waiting
Design pass12m
Legal reviewToday
Copy editQueued
Next meeting
Today, 2:30 PM

Client sync with ops and finance in conference room B.

Budget note
$12,400 remaining
83%

On pace for the quarter close after the vendor payment clears.

Notes
Legal follow-up and handoff
Final copyExport deckShare recap

Material presets

Start from a Liquid Glass recipe, then tune the controls.

20 presets

Fine tune

Adjust the live Liquid Glass material directly.

Tint
18px
74%
188%
13%
108%
28px
76%
72%
8%
2%
52%
26%
Progressive blur
01

Where it shines

Use liquid glass on navigation bars, floating cards, modal surfaces, and small feature panels that sit on top of rich color or imagery.

  • Pair it with a visibly busy background.
  • Keep text short and high-contrast.
  • Use border and shadow together to keep separation obvious.
02

Where it fails

Glass on a flat background looks like a broken effect instead of a design choice. The same is true when the blur gets too strong or the opacity gets too low.

  • Do not stack glass on glass without reason.
  • Do not remove the border because it looks cleaner.
  • Do not animate every glass surface by default.
03

How to evaluate it

Look at the page as a system. The effect should improve hierarchy, support the layout, and survive in a reduced-motion or low-transparency context.

  • Check contrast on the busiest background region.
  • Verify the fallback still looks intentional.
  • Use reduced-motion and reduced-transparency friendly defaults.
Questions
Can I use Liquid Glass without a busy background?

Not effectively. The effect depends on something interesting being behind it. If the background is flat, a simpler surface is usually better.

What is the most important accessibility rule?

Keep text readable against the busiest area that can show through the blur, not just against the average color.