What is glassmorphism?

Glassmorphism is a UI design trend that uses frosted-glass style panels — translucent backgrounds with a blur effect, subtle border, and soft shadow — to create depth and layering over colourful backgrounds.

Which browsers support backdrop-filter?

backdrop-filter is supported in Chrome 76+, Edge 79+, Safari 9+ (with -webkit- prefix), and Firefox 70+. For maximum compatibility the generator outputs both the -webkit-backdrop-filter and standard backdrop-filter properties.

Why doesn't the glass effect show on a white background?

Glassmorphism requires a colourful or image background behind the element for the blur and transparency to be visible. On a white or single-colour background the effect is nearly invisible. Use the gradient presets to see the true result.

How do I adjust the glass colour tint?

The background opacity slider controls how much white (or a chosen colour) is mixed into the glass. Low opacity gives a very transparent look; higher opacity adds more tint. You can also tweak the generated background: rgba() value directly in your stylesheet.

Design 無料サインアップ不要

CSS Glass Generator

Generate CSS glassmorphism effects with live preview and code export

ツールを読み込み中…

このツールについて

Design stunning glassmorphism UI cards entirely in CSS. Adjust backdrop blur, background opacity, border opacity, border radius, and shadow strength using intuitive sliders. Choose from three gradient background presets — purple-blue, sunset orange-pink, and ocean teal-green — to see exactly how your glass effect looks against colourful content. The live preview shows a realistic glass card floating over the chosen background. Copy the generated CSS including backdrop-filter, background, border, border-radius, and box-shadow with one click.

使い方

1 Choose a background scene preset (purple-blue, sunset, or ocean) from the selector.
2 Drag the Blur slider to set the backdrop-filter blur amount (0–40px).
3 Adjust Background Opacity to control how translucent the panel is.
4 Set Border Opacity for the glass edge highlight.
5 Change Border Radius to round the corners.
6 Increase Shadow Strength to add depth with a soft box-shadow.
7 Click 'Copy CSS' to copy the generated CSS to your clipboard.

このツールについて

使い方

よくある質問