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

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

CSS グラスモーフィズム ジェネレーターは、すりガラス（グラスモーフィズム）UI スタイルを視覚的に編集できる無料ツールで、フロントエンド開発者やプロダクトデザイナー向けです。ぼかし量、表面の透明度、色の彩度、枠線の太さ、角丸半径、影の強さを数値入力とスライダーで調整し、スウォッチで色合いを選びます。プレビュー画面が鮮やかなグラデーション背景の上にガラスパネルをリアルタイムで表示し、backdrop-filter・半透明の背景・控えめな枠線・box-shadow を使った完全な CSS が生成されるのでコピーできます。ガラス風のカード、ナビゲーションバー、モーダル、オーバーレイを、rgba のアルファ値を手で調整したり -webkit-backdrop-filter プレフィックスを覚えたりせずに作れます。

CSS グラスモーフィズム ジェネレーターの使い方

1. 「ぼかし」（px）を設定して、パネル背後の領域をどれだけすりガラスにするかを調整します。
2. 「透明度」を下げるとガラスがより透けて見え、上げるとより不透明な表面になります。
3. 「彩度」を 100% より上げると、背景の色がガラス越しに鮮やかに透けます。
4. スウォッチで色合いを選び、「枠線」の太さ・「角丸」・「影」を調整して仕上げます。
5. 各値を変えるたびに、背景の上でプレビューがリアルタイムに更新されるのを確認します。
6. 生成された CSS をスタイルシートにコピーします——-webkit-backdrop-filter のフォールバックも含まれています。

使用例

ぼかし 12, 透明度 25%, 彩度 120%, 角丸 16, 枠線 1, 影 24

backdrop-filter: blur(12px) saturate(120%); background: rgba(255, 255, 255, 0.25); …

ぼかし 8, 透明度 60%, 彩度 100%, 角丸 0, 枠線 1, 影 8

backdrop-filter: blur(8px) saturate(100%); background: rgba(255, 255, 255, 0.6); …

色合い #0f172a, ぼかし 20, 透明度 30%, 彩度 140%, 角丸 24, 影 40

backdrop-filter: blur(20px) saturate(140%); background: rgba(15, 23, 42, 0.3); …

よくある質問

backdrop-filter は何をしますか？

backdrop-filter は要素の背後にあるものにグラフィック効果——ここではぼかしと彩度——を適用し、これがすりガラスの見た目を生み出します。ジェネレーターは複数ブラウザで動くよう backdrop-filter と -webkit-backdrop-filter プレフィックスの両方を出力し、さらに半透明の背景・枠線・影も付けます。

なぜ透明度のコントロールがあるのですか？

ガラス効果には、ぼかされた背景が透けて見えるように部分的に透ける背景が必要です。透明度スライダーはパネルの背景色（rgba）のアルファを設定します。値が低いほど透明で、高いほど不透明で密になります。

色付きやダークなガラスにできますか？

はい。スウォッチで任意の色合いを選びます——ツールがそれを rgba 背景に混ぜるので、暖色・寒色・ダークなガラスを作れます。暗い色合いと高い透明度を組み合わせれば落ち着いたオーバーレイに、白のままなら定番のすりガラスパネルになります。

すべてのブラウザで動きますか？

ほとんどのモダンブラウザは backdrop-filter に対応しています。生成される CSS には Safari や古い Chromium 向けの -webkit-backdrop-filter プレフィックスが含まれますが、非常に古いブラウザはこれを無視し、ぼかしなしの半透明背景だけを表示します。

データはどこかにアップロードされますか？

いいえ。ジェネレーターはすべて JavaScript でブラウザ内で動作します——色や値がサーバーに送信されることはないため、プライバシーが保たれ、ページの読み込み後はオフラインでも使えます。