tool · one of 51 Pro CSS and Tailwind
Glass
What backdrop-filter settings make a card look like frosted glass?
Glass only reads as glass over something, and a generator that previews it on a flat colour shows you nothing. This floats the card over shapes on a gradient, swaps the ground under it, and moves blur, saturation, tint, edge, radius and shadow while you watch - then applies the same declarations to an element of the page you are on, where the thing behind it is your own content.
Reach it Press ⌘ + K on any tab and type glass. Ctrl + K on Windows and Linux
in the panel · this one is Pro
What this actually is
frosted glass tuned over a busy ground and tried on the pageA navigation bar that sits over a hero image, a card over a mesh background, a modal over a busy page. Trying it in place is the only way to know whether the text on it stays readable over what is actually behind it.
Asked about this tool
3 of themWhy does my glass look like a grey box on the page?
Because backdrop-filter blurs what is behind the element, and on a plain background there is nothing to blur. Glass needs a photo, a gradient or content underneath it to look like anything.
Does it work in every browser?
backdrop-filter is supported in every current browser. The CSS carries the prefixed form for older Safari alongside the standard one.
Is the change saved on the site?
No. It is a live edit to the page in this tab, with an undo row of its own, and a reload removes it.
how to use glass
- Open Glass and start from Frost, Smoke, Clear or Tinted.
- Move the blur, saturation, tint and edge until it reads as glass.
- Select an element on the page and apply the glass to see it in place.
- Take it as CSS or as Tailwind classes.
96 of these · no host permissions · three free audits