Design a frosted glass panel and see it on a card, a navbar and a modal over real photos or gradients. Adjust blur, tint, saturation, border, highlight, corner radius and grain, check that the text on the glass stays readable, then copy CSS (with the -webkit- prefix and a fallback for browsers that cannot blur), Tailwind classes or a React component.
Four properties make the effect. backdrop-filter: blur() softens whatever is painted behind the element, and adding saturate() keeps those blurred colours vivid. A background colour with low alpha, such as rgba(255, 255, 255, 0.18), tints the result so the panel reads as a surface rather than a hole. A 1px semi-transparent white border and an inset top highlight suggest the edge of a sheet of glass, and a soft drop shadow lifts it off the page.
backdrop-filter only affects what is behind the element, not the element's own content, so text and icons on the panel stay sharp. The element needs some transparency in its own background for the effect to show; a fully opaque background hides the blur completely. Because the property creates a new stacking context, absolutely positioned children and z-index inside the panel behave as they would inside any positioned container.
Text contrast is the usual weak point. The colour behind a word changes as the page scrolls or the photo changes, so a ratio that passes in one spot can fail a few pixels away. Three things help most: a stronger blur, which narrows the range between the darkest and lightest areas; a higher tint opacity, which pushes every area towards the tint colour; and a darker or lighter tint that matches the text, such as a dark tint under white text.
Use the contrast check as a first pass. When it reports a failure it also tells you the tint opacity that would pass with your current text colour, which is usually a better fix than making the text bold. For long reading text, consider a near-solid panel and keep the strongest glass for navigation bars, badges and short headings.
Cards over a hero photo are the classic use: the image stays visible while the card holds a headline and a button. Keep the card large enough that the blur has room to show, and give it a clear border so it does not dissolve into the photo.
A sticky glass navbar lets content show through as the page scrolls, which keeps the page feeling open while the links stay readable. Use a higher opacity here than on a card, because the navbar will pass over every kind of content on the page. For modals, a glass dialog over a dimmed page keeps the context visible behind it; dim the page first so the dialog's text has a predictable background.
It is a style where a panel looks like frosted glass: whatever sits behind it is blurred and tinted, and a faint light border and highlight give it an edge. In CSS it is made with the backdrop-filter property, a semi-transparent background colour, a 1px border and usually a soft shadow.
Current versions of Chrome, Edge, Firefox and Safari all support it. Older Safari versions only understand the -webkit-backdrop-filter spelling, which is why the generated CSS writes both. Very old browsers ignore the property entirely, so the CSS also includes an @supports rule that swaps in a near-solid background for them.
If a browser cannot blur, a 15% white panel becomes a nearly invisible box with unreadable text on top. The @supports not (...) rule detects that case and raises the background opacity so the panel turns into a solid card. The generated CSS also respects prefers-reduced-transparency, a setting some visitors use to ask for fewer see-through surfaces; browsers that do not know that setting simply skip the rule.
It is an estimate. Each background has three measured colours from the area behind the panel (darkest, average and lightest), the tool pulls them towards the average according to your blur, lays your tint over them and computes the WCAG ratio against your text colour. Real photos have small bright or dark spots it can miss, so check the finished page, and keep the ratio comfortably above 4.5:1 for body text.
No. It uses arbitrary values (for example backdrop-blur-[16px] and bg-[rgba(...)]), which work in Tailwind CSS 3.2 and later and in version 4. The supports-[backdrop-filter] variant applies the see-through background only where blur is available, so the plain bg class acts as the fallback. Tailwind has no noise utility, so the grain comes as a separate line you can add.
The photos come from Pexels, whose licence allows free use. They are here to test your glass against real images; the generated code does not include them, so use your own background on your site.
Each blurred panel makes the browser re-draw and blur what is behind it whenever that content changes or scrolls. One navbar and a few cards are fine on most devices. Dozens of blurred elements, very large blur values on full-screen layers, or animating the blur can make scrolling stutter on low-end phones.
Related: CSS filter generator, Color palette generator, Color contrast checker, Hex color picker, Font pairing tool.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.