CSS Glassmorphism Generator

Glassmorphism is a UI style where a panel looks like frosted glass: a translucent background, a soft blur of whatever sits behind it, rounded corners and a faint border. In CSS it is built with a semi-transparent background plus the backdrop-filter property.

backdrop-filter applies a graphical effect, here a blur, to the area behind an element rather than the element itself. That is what frosts the content sitting under your glass panel. The background stays partly transparent so the blurred scene shows through.

It works in current Chrome, Edge, Firefox and Safari. Safari and older WebKit builds need the -webkit-backdrop-filter prefix, which this tool always includes. Very old browsers ignore it, so the panel simply shows its translucent background with no blur.

There must be content behind the element to blur, and the element needs a semi-transparent background so that content shows through. A fully opaque background hides the blur. On Safari, confirm the -webkit-backdrop-filter line is present, which this generator adds for you.

Transparency sets the alpha channel of the rgba() background. A value of 0.2 means the tint is 20 percent opaque, so 80 percent of the blurred backdrop shows through. Lower values look airier, higher values look more solid.

No. The preview and the generated CSS are computed entirely in your browser, so nothing about your settings leaves your device.