What is glassmorphism in CSS?

Glassmorphism is a design style that mimics frosted glass — a translucent layer with a strong blur of whatever sits behind it, plus a subtle border highlight. The CSS recipe is short: a semi-transparent background, backdrop-filter: blur() for the frosting, and a thin light border. It became mainstream around 2020–2021 (Apple's Big Sur was the canonical reference) and has since become a staple for cards, modals, and floating navigation bars.

Does backdrop-filter work in every browser?

In 2026, backdrop-filter has full support in Chromium (Chrome, Edge, Brave, Opera, Samsung Internet), Firefox (since 103, July 2022), and Safari — Safari requires the -webkit- prefix, which the tool emits automatically. The remaining caveat is some older Android WebViews. If you must support those, gate the effect behind @supports (backdrop-filter: blur(1px)) and provide a solid-color fallback.

Why does my glass effect look gray and lifeless?

Three things kill glassmorphism: a boring solid background behind the panel (frosted glass needs something colorful to refract), too-low blur (under 8px reads as 'cloudy' rather than 'glass'), and missing saturation. Using saturate(180%) inside backdrop-filter pumps up the colors that bleed through, which is what gives premium glass UIs their depth. Try the four background presets in this tool — the same panel can look terrible on dark gray and gorgeous on a vivid gradient.

Is glassmorphism accessible?

It can be — but it's the design language most likely to fail WCAG contrast checks. Always test text-on-glass with a contrast tool (use a screenshot of the rendered panel as the background sample). Add a darker scrim layer (rgba(0,0,0,0.3)) under the glass if your background is photographic. Provide a prefers-reduced-transparency fallback that swaps the translucent panel for a solid one. Don't use glass for body copy at small sizes — keep it for chrome and key calls-to-action.

What's the performance cost of backdrop-filter?

backdrop-filter is GPU-accelerated, but it forces the browser to composite a separate layer for whatever sits behind the element, which means more memory and a longer paint. On a desktop or modern phone, one or two glass panels per screen are imperceptible. Stacking ten of them on a scroll-heavy page (especially over a video background) can drop a low-end Android phone to 30 fps. Profile in DevTools' Performance panel if you're seeing jank, and consider will-change: backdrop-filter sparingly.

CSS グラスモーフィズムジェネレーター

4種類の背景に対するライブプレビューでフロストガラス風UIパネルを作成。ガラスを高級に見せる saturate() のテクニックを含むクロスブラウザ対応のCSSを出力します。

テスト背景

ティント色

ティントの不透明度: 0.18

blur（ぼかし）: 16px

saturation（彩度）: 180%

ボーダー（色 · 不透明度）

0.25

角丸: 20px

やわらかいドロップシャドウを追加

プレビュー

グラスパネル

このカードをカラフルな背景の上に置くと、ガラスが背後のものを屈折させて見せてくれます。

CSS

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

グラスモーフィズムには3つの要素が必要です。半透明の背景ティント、しっかりかけた backdrop-filter のぼかし、そして控えめなボーダーのハイライト。これらをカラフルな下地（グラデーション、写真、幾何学模様）の上に重ねれば、Apple の Big Sur で広まったプレミアムなフロストガラス風の効果が得られます。

使い方

1Pick a background preset (gradient, photo, dark, geometric) — glassmorphism only looks good against something colorful, so test against more than one.
2Set the tint color and opacity. Most premium glass uses #ffffff at 0.10–0.25 opacity; a black tint at 0.20–0.40 reads as 'dark glass.'
3Adjust blur (12–20px is the sweet spot) and saturation (180% is the Apple default — anything below 130% looks washed out).
4Tune the border. A 1px white border at 0.20–0.30 opacity adds the highlight that makes glass look 3D.
5Toggle the soft drop shadow on if the panel needs to lift off the background. Then click Copy and paste the CSS into your stylesheet.

主な機能

Live preview against four different backgrounds — gradient, photo, dark, and geometric — so you see how the glass refracts in context
Independent control over tint color, opacity, blur, saturation, border color/opacity, corner radius, and shadow
Outputs both standard backdrop-filter and -webkit-backdrop-filter for full Safari + Chromium + Firefox support
Auto-includes the saturate(180%) trick that gives premium glass UIs their colorful depth
Pure client-side — no server, no signup, copy-paste-ready CSS

よくある質問

詳しく読む

CSS Glassmorphism in 2026 — A Practical Guide to Frosted-Glass UI That Actually Looks Good

CSS グラスモーフィズム ジェネレーター

グラスパネル

使い方

主な機能

よくある質問

詳しく読む

CSS グラスモーフィズムジェネレーター