Skip to main content
Back to all tools

Glassmorphism Generator

Create frosted glass UI effects with backdrop blur, opacity, and saturation controls.

10px
20%
30%
180%
Preview bg:
drag to pan
css
.glass {
  background: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 16px;
}

Frequently Asked Questions

What CSS properties create a glassmorphism effect?

Glassmorphism relies on three CSS properties: backdrop-filter: blur() to blur everything behind the element, a semi-transparent background using rgba() or hsl() with low alpha, and a subtle border with low opacity. Adding -webkit-backdrop-filter ensures Safari support.

How do I add a glassmorphism card in React or Next.js?

In React or Next.js, apply the CSS via a className with Tailwind utilities like backdrop-blur-md, bg-white/20, and border border-white/30, or pass a style object: { backdropFilter: 'blur(10px)', background: 'rgba(255,255,255,0.2)' }. Use this generator to get the exact values.

Does backdrop-filter work in all browsers?

backdrop-filter is supported in all modern browsers (Chrome, Edge, Firefox 103+, Safari). For older browsers, include -webkit-backdrop-filter as a fallback. Firefox added full support in version 103 (2022).

How can I use glassmorphism with Tailwind CSS?

Tailwind CSS includes backdrop-blur utilities (backdrop-blur-sm, backdrop-blur-md, backdrop-blur-xl) and bg-opacity utilities. Combine them with bg-white/20 and border border-white/30 for a quick glassmorphism card without writing custom CSS.

What is the difference between backdrop-filter and filter?

filter applies effects to the element itself (blurring its own content), while backdrop-filter applies effects to everything rendered behind the element — which is what creates the frosted glass look.