Frosted glass CSS with backdrop-filter, the Safari prefix, a fallback and a contrast check
Runs in your browser. Nothing you type is sent anywhere. Checked against sources on 22 Oct 2026.Frosted glass needs a translucent background such as rgb(255 255 255 / 0.2) plus backdrop-filter: blur(12px), which blurs whatever is behind the element. Add -webkit-backdrop-filter for Safari 9 to 17, a faint 1px border and a soft shadow, and check the text contrast over the lightest and darkest parts behind it.
Pick a preset or set the tint colour and its transparency.
Set the blur and saturation of what shows through, and the corner radius.
Choose the lightest and darkest colours behind the panel and read the text contrast.
Copy the CSS; the fallback block keeps text readable where backdrop-filter is missing.
Glassmorphism is the frosted-glass look: a panel you can partly see through, with the background behind it blurred. The effect comes from two properties working together, and this generator writes both with the details that are easy to forget.
How it works. The background is a colour with transparency, usually white at 10 to 30%. Backdrop-filter then blurs, and often saturates, everything painted behind the element. Without the translucent background there is nothing to see through; without the blur it is just a tinted box.
What the CSS includes.
| Line | Why |
|---|---|
| background with an alpha value | the tint you see through |
| -webkit-backdrop-filter | Safari 9 to 17 only know the prefixed name |
| backdrop-filter | Chrome 76+, Firefox 103+, Safari 18+ |
| border with a low alpha | catches the light at the edge |
| box-shadow | lifts the panel off the page |
| @supports fallback | a near-solid background where blur is missing |
Readable text. Glass sits over photos and gradients, so the text contrast changes across the panel. Pick the lightest and the darkest colours that show through and the page works out the contrast of your text over both, after mixing in the tint. The weaker of the two is the one to trust; WCAG asks for 4.5 to 1 for body text and 3 to 1 for large text. Raising the tint's opacity is the quickest fix.
Why the effect may not show. Backdrop-filter needs something behind the element to blur, such as an image or a colourful gradient; on a plain white page the glass looks like a white box. It also stops working when an ancestor between the element and the backdrop creates a new backdrop root, for example with a filter or opacity below 1.
Everything runs in your browser. Related tools: Box Shadow Generator, Border Radius Generator, CSS Gradient Generator, Color Converter.
Give the element a translucent background, such as rgb(255 255 255 / 0.2), and backdrop-filter: blur(12px). The blur applies to whatever is behind the element, so place it over an image or a colourful gradient. A 1px light border and a soft shadow complete the look.
Usually the background is fully opaque, so nothing shows through, or there is nothing colourful behind the element to blur. Older Safari also needs the -webkit-backdrop-filter line. A parent with a filter, opacity below 1 or a mask can also cut the element off from the page behind it.
Safari 18 and later read backdrop-filter without a prefix. Safari 9 to 17, which many iPhones and Macs still run, only read -webkit-backdrop-filter. Writing both lines, prefixed first, covers every version, and the generator always includes both.
Glass can be readable if the text contrast holds over every part of the backdrop. A blurred photo has light and dark patches, so check the text against both extremes, as this page does. Raising the tint opacity or adding a stronger tint helps. Some people also turn on reduced transparency in their system settings.
Without the blur, a 20% white panel over a busy photo can make text unreadable. The @supports block in the generated CSS raises the background to at least 85% opacity only where backdrop-filter is missing, so those readers get a solid, readable card instead.
Backdrop blur is redrawn whenever the content behind it moves, such as during scrolling, and its cost grows with the blur radius and the area covered. Blurs of 8 to 16px over cards are normally smooth; very large blurs over full-screen areas can stutter on low-end phones.
Rates and rules change; check the source before you rely on a figure.
Still stuck? Ask about Glassmorphism CSS Generator and anybody who knows can answer. No account needed.
Same job, other tools: Twitter Card Generator – Build summary and summary_large_image card tags for X.
On the related tools: Cron Expression Generator – Generate a cron expression by choosing when the job should run · Sitemap Index Generator – Split a large site into numbered sitemaps with an index file.