ガラスの色
ぼかし
8px彩度
180%透明度
25%角丸
16px枠線
30%背景（プレビュー用）
プレビュー
コード
生成はすべてブラウザ内で行われ、選んだ色や設定はアップロードされません。
Web デザインで人気の「グラスモーフィズム（すりガラス風）」UI を、スライダーを動かすだけで作れる CSS ジェネレーターです。グラスモーフィズムとは、背景が透けて見えるすりガラスのようなパネルの上にコンテンツを置くデザインで、`backdrop-filter: blur()` による背景ぼかしと、半透明の塗り、薄い白い枠線、やわらかい影を組み合わせて表現します。このツールでは、ぼかしの強さ（blur）、彩度（saturate）、透明度（塗りの不透明度）、角丸（border-radius）、枠線の濃さ、ガラスの色味（tint）を個別に調整でき、変更はすべて右側のプレビューカードにリアルタイムで反映されます。プレビューの背景は鮮やかな 2 色グラデーションになっていて、後ろの色がぼけて透けることで、すりガラス効果が実際にどう見えるかをその場で確認できます。出力は「CSS」と「Tailwind」を切り替えられ、CSS では `background` / `backdrop-filter`（`-webkit-` 付き）/ `border-radius` / `border` / `box-shadow` を、Tailwind では `backdrop-blur-[...]` などの任意値クラスを生成します。Figma やデザインツールを開かなくても、ブラウザだけでグラスモーフィズムのコードが完成します。色や設定はすべてあなたのブラウザ内で処理し、サーバーへアップロード・保存・送信は一切行いません。
使い方
- ぼかし・彩度・透明度・角丸・枠線のスライダーと、ガラスの色を調整します。プレビューに即座に反映されます。
- プレビュー背景の 2 色を変えると、後ろの色がぼけて透ける見え方を確認できます。
- 出力を「CSS」または「Tailwind」に切り替え、「コピー」して対象要素のスタイルに貼り付けます。
よくある質問
グラスモーフィズムとは何ですか？
背景が透けて見えるすりガラスのようなパネルの上にコンテンツを置く、Web デザインの手法です。背景をぼかす `backdrop-filter: blur()`、半透明の塗り、薄い白い枠線、やわらかい影を組み合わせることで、奥行きと透明感のある今っぽい見た目になります。
CSS だけで作れますか？
はい。出力された `background` / `backdrop-filter` / `border-radius` / `border` / `box-shadow` を対象要素に貼り付けるだけで動きます。ぼかしは背景の要素に重ねて初めて効くため、半透明カードの後ろに色や画像がある状態で使ってください。
Tailwind 用のコードも出せますか？
出せます。出力を「Tailwind」に切り替えると、`backdrop-blur-[...]`・`backdrop-saturate-[...]`・`bg-[rgba(...)]`・`rounded-[...]`・`border-[rgba(...)]` などの任意値クラスを生成します。そのまま要素の class に貼り付けてください。
backdrop-filter が効かないことはありますか？
古いブラウザや一部設定では `backdrop-filter` が無効な場合があります。Safari 向けに `-webkit-backdrop-filter` も出力しているので両方残してください。また、すりガラスは後ろにぼかす対象（背景色・画像・別要素）がないと効果が見えません。
入力した色や設定はアップロードされますか？
いいえ。生成とプレビューはすべてあなたのブラウザ内で完結し、選んだ色や各スライダーの値はサーバーへアップロード・保存・送信されません。完全にローカルで動作します。