CSS グラスモーフィズム ジェネレーター
半透明のティント、backdrop-filterのぼかしと彩度（-webkit-付き）、枠線、角丸、影を調整して、すりガラス風のCSSを作成しプレビューできます。
グラスモーフィズムは、パネルをすりガラスのように見せる表現です。背後のページがぼやけ、少し鮮やかになって透け、その上に薄い半透明のティントと明るい枠線が重なります。この効果はCSSの backdrop-filter プロパティに支えられています。このジェネレーターは、半透明の背景、Safariで必要だった -webkit- 付きの重複行を含む backdrop-filter: blur() saturate()、枠線、角丸、影までルール全体を出力し、カラフルな背景の上にカードを表示します。
使い方
- ティントの色と不透明度を選びます（多くのデザインでは10〜30%が適しています）。
- 透けて見える背景のぼかしと彩度を設定します。
- 枠線の不透明度、角丸、影を調整します。
- CSSをコピーして、画像やグラデーションの上に置いた要素に適用します。単色の背景ではガラスが見えません。
計算式
background: rgba(ティント, 不透明度) · backdrop-filter: blur(<px>) saturate(<%>) · border: 1px solid rgba(ティント, 枠線の不透明度)
ぼかしの半径は、ガウスぼかしの標準偏差です。saturate(180%) はガラスの背後の色を1.8倍鮮やかにします。画像のプレビューではbackdrop-filterを実行できないため、プレビューはSVGフィルターでその効果を再現しています。
計算例
初期設定では background: rgba(255, 255, 255, 0.2)（白の20%）に backdrop-filter: blur(12px) saturate(180%)、白30%の1 pxの枠線、16 pxの角丸、やわらかい 0 8px 32px の影になります。黒35%、ぼかし8 px、彩度100%の暗いバリエーションでは、saturate() が省かれて blur(8px) だけが残ります。
よくある質問
ガラスの効果が見えないのはなぜですか？
backdrop-filterは要素の背後にあるものにだけ作用します。単色のページにはぼかす対象がないため、カードはただ半透明に見えるだけです。写真、グラデーション、重なった図形の上に置いてください。
backdrop-filterはパフォーマンスに悪いですか？
要素の背後の内容が変わるたびにブラウザがぼかしをやり直すため、通常の背景より負荷が高くなります。ガラスのパネルが数枚なら問題ありませんが、低スペックのスマートフォンでは、スクロールや動きのある内容の上に広いぼかし領域を置くのは避けてください。
すりガラス風のデザインはアクセシブルですか？
文字が読みやすいままであれば問題ありません。複雑な背景はコントラストを予測できない形で下げるので、ティントの不透明度とぼかしを十分に取り、背景の最も暗い部分と明るい部分に対して文字色を確認してください。
出典
最終更新:
この入力内容のページアドレス： https://kakao.mobile/ja/tools/css-glassmorphism-generator/
このツールを引用する
kakaoCalc. (2026, November 8). CSS グラスモーフィズム ジェネレーター. https://kakao.mobile/ja/tools/css-glassmorphism-generator/
“CSS グラスモーフィズム ジェネレーター.” kakaoCalc, 8 Nov. 2026, kakao.mobile/ja/tools/css-glassmorphism-generator/.