CSS Glassmorphism Generator (with Backdrop Blur)

Design frosted-glass CSS cards with live preview and copy-ready code

🔒 100% ブラウザ内🆓 ずっと無料⚡ サインアップ不要
注意: 下記のツールインターフェースは現時点で英語のみに対応しています。UI の翻訳は順次進めています。 このツールを英語で見る →
Glass card
Frosted, saturated, alive
CSS
.glass {
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 20px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}
Tailwind classes (closest match)
bg-white/25 backdrop-blur-xl backdrop-saturate-150 border border-white/35 rounded-2xl shadow-xl

使い方

  1. 1
    Pick a background

    Choose a preset gradient or drop your own image - the glass sits on top.

  2. 2
    Tune the sliders

    Blur, saturation, background alpha, border, radius, shadow - the preview updates instantly.

  3. 3
    Copy the CSS

    Paste into your stylesheet or Tailwind arbitrary-values ([backdrop-filter:blur(20px)]).

CSS Glassmorphism Generator (with Backdrop Blur) について

Free CSS glassmorphism generator. Design frosted-glass cards with live sliders for blur, saturation, background transparency, border, and shadow - over your own background image or a preset. Copy production-ready CSS with vendor prefixes. 712 Tools の CSS Glassmorphism Generator (with Backdrop Blur) はモダンな JavaScript API を使って完全にブラウザ内で動作します - サーバーがあなたのデータを見ることは一切ありません。つまり、即時の結果、完全なプライバシー、アップロード制限なしです。

デバッグ、簡単な確認、あるいは本番のインシデント対応まで - このツールは何度でも無料で使えます。ウォーターマークなし、サインアップなし、ツール内広告なし。

よくある質問

Do all browsers support backdrop-filter?

Yes on Chromium, Safari, and modern Firefox. Older Firefox needs a fallback background color - the generated CSS includes one.

Why is my glass showing solid?

backdrop-filter only works when the element has translucent background. Keep the background alpha below 1 and make sure there's actual content behind the card.

Does this work in Tailwind?

Yes - Tailwind ships backdrop-blur-* utilities. The generator shows both raw CSS and the closest Tailwind class combo.

続きを読む

5 分で読了

The WCAG color contrast checklist every designer should bookmark

AA vs AAA, the math behind the ratios, why gray-on-gray fails on retina screens, and the two-line HTML that makes a color contrast test run in seconds.

5 分で読了

Glassmorphism, neumorphism, and where 2026 UI is actually heading

The design trends that shipped, the ones that flopped, and what makes modern UI actually feel modern - from frosted glass to soft shadows to conic gradients.

関連ツール

Color Converter

Convert between HEX, RGB, HSL, and CMYK with live preview

Palette Generator

Generate harmonious color palettes from a base color

CSS Gradient

Design linear, radial, and conic CSS gradients with live preview

Box Shadow

Design multi-layer CSS box-shadows with live preview

Contrast Checker

Check text/background contrast against WCAG 2.1 AA and AAA - live preview

Physics Editor

Free online sprite hitbox editor - auto-trace collision polygons and export for Phaser, Matter.js, Rapier or any 2D engine