Skip to content
ToolsOnDuty - free online tools
CSS & Design

Glassmorphism Generator

Create a frosted-glass effect with backdrop-filter and copy the CSS.

Free foreverRuns in your browserNo sign-up
Glass
background: rgba(255, 255, 255, 0.20);
border-radius: 16px;
backdrop-filter: blur(10px) saturate(150%);
-webkit-backdrop-filter: blur(10px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.3);

About the Glassmorphism Generator

Glassmorphism is the frosted-glass UI style, where a translucent panel blurs whatever is behind it using backdrop-filter.

This tool lets you tune the blur, transparency, saturation and radius over a colourful background, with a live preview, then copy the CSS.

It runs in your browser.

Key features

  • Blur, transparency and saturation
  • Live preview over a colourful background
  • Includes -webkit-backdrop-filter
  • Copy CSS

How to use

  1. 1Adjust the blur, transparency and saturation.
  2. 2Check the preview over the background.
  3. 3Copy the CSS.

Examples

Frosted card
Output: backdrop-filter: blur(10px) saturate(150%);

Blur plus a translucent background creates the frosted-glass look.

Frequently asked questions

Is backdrop-filter widely supported?
It works in modern browsers. This tool includes the -webkit- prefix for Safari, and you should provide a solid fallback background for older browsers.
Why does it need a background behind it?
backdrop-filter blurs whatever is behind the element, so the effect only shows over content or a colourful background.
Can I change the tint?
The generated CSS uses a white translucent background; change the rgba colour to tint the glass any shade.

Related tools