ここで実行 100% ブラウザ内で動作します。アップロードもログインも不要です。
Glassmorphism Generator
ぼかし・下地・枠線・角丸を調整してフロストガラスのカードを作り CSS をコピー。
ライブプレビュー
フロストパネル
ぼかされた背景があってこそこの効果は成立します。写真、グラデーション、情報量の多いコンテンツの上に置いてください。
生成された CSS
backdrop-filter は現在の Chrome、Edge、Safari、Firefox が対応しています。スニペットには非対応エンジン向けの単色フォールバックも含めています。
使い方
- ぼかしでカードの背後がどれだけにじむかを設定します。12〜20px 程度がすりガラスらしく見えます。
- 不透明度で下地レイヤーを調整します。低いほど背景が透け、高いほどパネルは乳白色になります。
- ぼかしで背景の色が抜ける場合は、彩度を 100% より上げます。
- 枠線の太さと枠線の不透明度を調整します。極細の明るい枠線があることで、単なる半透明の四角との差が出ます。
- 下地の色を選び、CSS をコピーします。スニペットには
@supportsによる単色背景のフォールバックが含まれます。
よくある用途
- ヒーロー画像の上にパネルを重ねる —— フロストカードなら画像を隠さずにテキストの可読性を確保できます。
- 追従型のナビゲーションバー —— スクロールで背後のページをぼかす半透明のバー。
- モーダルやダイアログ —— ガラスのパネルは、平面の四角ではなくページの上に浮くレイヤーとして見えます。
- 料金・機能カード —— グラデーション背景に明るい下地を重ねれば、素材なしで奥行きが出ます。
- デザインの方向性を試作する —— 数値をここで決めてからデザイントークンに書き込みます。
よくある質問
Q: プレビューに賑やかな背景が必要なのはなぜですか？ A: 単色の背景では backdrop-filter がぼかす対象を持てません。グラデーションと色形を置くことで、ぼかしが実際に見えるようにしています。
Q: Firefox でも動きますか？
A: 現在の Firefox は backdrop-filter に対応しています。古いエンジンは無視するため、スニペットには @supports による単色背景のフォールバックを用意しています。
Q: 暗い背景でも文字が明るいのはなぜですか？ A: プレビューカードはサンプルのグラデーションの上で見えるよう白文字に固定しています。実際の配色に合わせて文字色を調整してください。
データはこのデバイス内にとどまります
Glassmorphism Generator は 100% ローカルで動作します。貼り付けたり、ドロップしたデータはすべてお使いのブラウザ内で処理され、送信されることはありません。当社のサーバーには何も保存されません——タブを閉じればすべて消えます。
入力された内容がサーバーへ送信・記録・解析利用されることはありません。初回読み込み後はネットワークを切断していてもこのページは動作します。