FAHAQ

Glassmorphism Generator

Create frosted-glass cards with CSS.

Free glassmorphism generator. Adjust blur, transparency and tint to design a frosted-glass card, preview it over a colorful background, and copy the CSS including background rgba and backdrop-filter. Runs in your browser.

How to use the Glassmorphism Generator

  1. 01Set the blur amount and background transparency.
  2. 02Pick a tint color and corner radius.
  3. 03Copy the CSS, including the backdrop-filter blur.

Frequently asked questions

Why doesn't the blur show in some browsers?

The frosted effect relies on backdrop-filter, which needs the -webkit- prefix in some browsers and a semi-transparent background behind the element. The generated CSS includes both the prefixed and standard properties.