tool · one of 51 24-hour trial, then Pro
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 · 24-hour trial, then Pro
What this actually is
A 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
Why 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.
101 of these · no host permissions · 24 hours of all of them