What is CSS glassmorphism?

Glassmorphism is a UI design trend that uses backdrop-filter blur and semi-transparent backgrounds to create a frosted glass effect. It gives elements a modern, layered look as if they are made of frosted glass floating over a colorful background.

Which browsers support backdrop-filter?

backdrop-filter is supported in Chrome, Edge, Safari, and Opera. Firefox does not support it by default — users need to enable it in about:config. The -webkit-backdrop-filter prefix is required for Safari support, which this generator includes automatically.

What does the Blur slider control?

The Blur slider sets the pixel value for backdrop-filter: blur(). A value of 0 gives clear glass with no blur; values of 20–40px give a strong frosted glass look. The generated CSS uses this value for both backdrop-filter and -webkit-backdrop-filter.

What does Saturation do in this generator?

Saturation controls the backdrop-filter: saturate() value as a percentage. Higher saturation (e.g. 200–300%) makes colors behind the glass more vivid. Lower values (100%) keep colors natural. It is stacked with blur in a single backdrop-filter declaration.

Can I use glassmorphism in dark mode?

Yes. Use the "Dark Glass" preset or pick a dark background color like #1a1a2e. For dark UIs, a slightly higher opacity (0.2–0.3) and reduced border opacity tend to look best. The live preview shows exactly how it will appear.

How do I use the generated CSS in my project?

Click "Copy CSS" to copy the full .glass-card block. Paste it into your CSS, SCSS, or Tailwind @layer components. Apply the class to any element that sits over a colorful or image background. Make sure the parent or body has a vibrant background for the effect to show.

Why does the glass effect not show without a colorful background?

backdrop-filter works by blurring and tinting what is rendered behind the element. If the background is plain white or black, the blur has nothing interesting to distort. Always place glassmorphism cards over gradients, images, or colorful backgrounds.

What is the box-shadow in the glass effect for?

The box-shadow (0 8px 32px rgba(31, 38, 135, 0.37)) adds a subtle blue-tinted glow beneath the card. It gives depth and separates the glass card visually from the background. You can toggle it off with the Shadow checkbox if you prefer a flat appearance.

CSS Glassmorphism Generator

Visual CSS glassmorphism and frosted glass effect generator

Updated Mar 2026100% Private — runs in browser

CSS Glassmorphism Generator

Create frosted glass effects with live preview

Controls

Blur16px

Opacity0.15

Saturation180%

Border Opacity0.18

Border Radius16px

Background Color

#FFFFFF

Box Shadow

Preset Themes

Live Preview

View Profile

Browser support note: backdrop-filter is not supported in Firefox by default. Add the -webkit- prefix for Safari support.

Generated CSS

.glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
}