グラスモーフィズムCSS生成ツール
透明度・ぼかし（backdrop-filter）・彩度・角丸・枠線をスライダーで調整し、すりガラス風UIのCSSをリアルタイムプレビューで生成。背景の上で見た目を確認しながらコードをコピーできます。
Glassmorphism
スライダーを動かすと、このカードの見た目がリアルタイムに変化します。
背景
CSS
※ backdrop-filter は主要ブラウザ（Chrome / Edge / Safari / Firefox）で利用できますが、Safari 互換のため -webkit-backdrop-filter も併記しています。ぼかしを効かせるには、要素の背後に背景（画像やグラデーション）が必要です。
使い方
1
背景を選ぶ
グラデーションの背景を選ぶか、お好みの画像をアップロードします。ガラス効果は背景の上で最も美しく見えます。
2
スライダーで調整
透明度・ぼかし・彩度・角丸・枠線・影をスライダーで調整し、プレビューを見ながらお好みのすりガラスを作成します。
3
CSSをコピー
生成されたCSSコードをコピーボタンでクリップボードにコピーし、そのままスタイルシートに貼り付けて使用します。
グラスモーフィズムとは
グラスモーフィズム（Glassmorphism）は、半透明の背景に backdrop-filter のぼかしを組み合わせ、すりガラスのように背後がぼやけて透ける表現です。本ツールは透明度・ぼかし・彩度・角丸・枠線・影を視覚的に調整し、そのまま使えるCSSを出力します。すべての処理はブラウザ内で完結し、アップロードした画像を含めデータはサーバーに送信されません。
機能・特徴
- リアルタイムプレビュー透明度・ぼかし・彩度などの変更が即座にプレビューへ反映。背景の上で実際の見た目を確認できます。
- 背景画像に対応グラデーションプリセットに加え、自分の画像をアップロードしてガラス効果を確認できます。
- ブラウザ互換コード-webkit-backdrop-filter を併記したクロスブラウザ対応のCSSをワンクリックでコピーできます。
- 完全ブラウザ完結すべての処理はブラウザ内で完結。画像を含めデータはサーバーに送信されません。
活用シーン
- ログイン・サインアップフォームのカード
- ヒーローセクションやヘッダーのナビゲーション
- ダッシュボードのウィジェット・カードUI
- モーダル・ポップアップの背景
- iOS/macOS風のコントロールパネル表現
よくある質問
グラスモーフィズムCSS生成は無料で使えますか？
はい、完全無料でご利用いただけます。会員登録も不要で、ブラウザを開くだけですぐにお使いいただけます。
アップロードした背景画像はサーバーに保存されますか？
いいえ。画像の読み込み・プレビューはすべてお使いのブラウザ内で完結し、サーバーに送信・保存されることはありません。
backdrop-filter はどのブラウザで使えますか？
2026年現在、Chrome・Edge・Safari・Firefox など主要ブラウザで利用できます。Safari では -webkit-backdrop-filter が必要なため、出力CSSには両方を含めています。
ぼかしが効かないのですが？
backdrop-filter は「要素の背後にある内容」をぼかすため、背景が透けて見える状況が必要です。親要素に背景画像やグラデーションがあるか、背景が単色で塗りつぶされていないかをご確認ください。
彩度（saturate）は何のために調整しますか？
ぼかしだけだと背景がくすんで見えることがあります。saturate を100%より上げると背後の色が鮮やかになり、よりガラスらしい透明感を演出できます。