DeskTray

Glassmorphism Generator

Create the frosted-glass card effect used in modern app and website designs.

Runs in your browser. Nothing is uploaded Free, no sign-up Works on mobile
Glass card
Frosted-glass UI with CSS backdrop-filter.
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 18px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
Blur: 12px
Transparency: 25%
Saturation: 160%
Border: 30%
Corner radius: 18px

backdrop-filter works in all modern browsers. Keep enough contrast between text and the background behind the glass.

How to use Glassmorphism Generator

  1. Adjust blur, transparency and saturation.
  2. Fine-tune the border, radius and tint.
  3. Copy the CSS.

Frequently asked questions

Does backdrop-filter work in Safari?

Yes, with the -webkit- prefix, which the generated CSS includes.

Is glassmorphism accessible?

Text on glass can have low contrast. Use a stronger tint or less transparency, and check contrast with our contrast checker.

Related tools

All Developer Tools →