← All text tools

Glassmorphism generator

Make frosted-glass cards with live preview and copy the CSS.

  • Free
  • No sign-up
  • Works on any device

About Glassmorphism generator

Build the frosted glass look popular in modern interfaces. Sliders control background blur, transparency, border and shadow on a live preview, and the tool outputs CSS using backdrop-filter. The effect only shows when something colourful sits behind the card, so test it over a gradient or photo.

How to use Glassmorphism generator

  1. Set the options above. The result updates live.
  2. Change anything until it's just right.
  3. Copy the result or download it.

Why use this tool?

Also known as

Frequently asked questions

Why is my backdrop-filter blur not showing?

The element needs a semi-transparent background, and something must be behind it to blur. Some older browsers need the -webkit-backdrop-filter prefix, which this generator includes in its CSS.

Is Glassmorphism generator free?

Yes. Glassmorphism generator on Toolipedia is free to use, with no sign-up and no watermark.

Is it safe to use?

Yes. Everything is worked out in your browser, and nothing you enter is sent to our server.

Does it work on my phone?

Yes. It works in any modern browser on Android and iPhone, as well as on tablets and computers. There's nothing to install.

Do I need an account?

No. Just open the page and use the tool. There's no sign-up and no email needed.

Related tools