Set blur, transparency, border and shadow for a frosted glass panel and copy CSS with a fallback.
A frosted glass panel is a translucent background plus a blur of whatever sits behind it. With the defaults the page writes background: rgba(255, 255, 255, 0.2); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); and backdrop-filter: blur(12px);. The same blur is written a second time as -webkit-backdrop-filter, for Safari versions that need the prefix. Blur goes from 0 to 40 px, background and border opacity from 0 to 100 percent, the corner radius from 0 to 100 px, the border from 0 to 10 px and the shadow blur from 0 to 100 px. A border width of 0 leaves the border line out, a shadow opacity of 0 leaves the shadow out, and a blur of 0 leaves out the blur lines and the fallback.
A browser that does not support backdrop-filter still shows the translucent background, but nothing behind it is blurred, so text on the glass can be hard to read. The page adds an @supports not (...) block that makes the background more solid in those browsers. The fallback opacity is 85 percent, or your own opacity if that is higher. With the defaults, 20 percent white becomes rgba(255, 255, 255, 0.85) in a browser without the blur. Browsers that support the property ignore the block. Check the result in the browsers you support, because the page cannot test them.
The preview box on this page applies only a short list of safe style properties, and backdrop-filter is not on it. So the preview shows the glass color at your opacity, the border, the radius and the shadow over a background color you choose, and the text says the blur is missing. The blur appears when you paste the CSS onto an element in your own page that sits over an image, a gradient or other content. Without anything behind it, there is nothing to blur. The page does not use filter: blur(), because that would blur the panel and its text instead of what is behind it.
Glass hurts contrast when the background behind it changes. A white 20 percent panel over a pale image can make white text unreadable, so test your text colors with the Color contrast checker against the lightest and darkest parts behind the panel. The preview picks black or white text for its own sample only. The page writes one rule. It does not write a noise texture, saturate() or brightness() filters, gradients inside the glass or dark-mode variants. Nothing you enter is stored or uploaded; the CSS is worked out in your browser.
Give the element a translucent background such as rgba(255, 255, 255, 0.2) and add backdrop-filter: blur(12px);, then place it over an image or colored content. Add a 1px semi-transparent white border and a soft shadow for the glass edge. This page writes all of it.
The usual causes are a fully opaque background, which hides the blur, and nothing behind the element to blur. Safari versions that need the prefix want -webkit-backdrop-filter, which this page writes next to the standard line. Also check that the background is not fully opaque and that the element really overlaps the content you want blurred.
It targets browsers that do not understand backdrop-filter and makes the panel's background at least 85% opaque there, so text stays readable without a blur. With the default 20% white background, the fallback is rgba(255, 255, 255, 0.85). Browsers with support ignore it.
12 px is the default here. Higher values hide more detail behind the glass, and 0 turns the blur off. The range here is 0 to 40 px. Try your own background, because the right amount depends on what is behind the panel.
The preview applies only a limited list of style properties and backdrop-filter is not among them, so it shows the transparency, border, radius and shadow only. Paste the CSS into a page where the panel sits over an image or gradient to see the blur.
No. The CSS is worked out in your browser and nothing is uploaded or stored. Page visits are counted with Google Analytics, never your values.