背面をぼかして透かす、すりガラス風のUIをブラウザ上で設計します。固定ヘッダーやモーダル背景などの用途別プリセットから始め、Safari対応とフォールバックを含むCSSをそのまま書き出せます。
用途から選ぶ
画像やグラデーションの上に置く標準的なガラスカード
Glassmorphism UI
背景を透かす、すりガラス風のエフェクト。
背面の図形が動いても、ぼかしがリアルタイムで追従します。
推奨の文字色は黒・コントラスト比 約9.9:1
本文テキストの基準（4.5:1）を満たしています。ただし背景画像の明るさは場所によって変わるため、実際の配置画像でも確認してください。
.glass-card {
background: rgba(255, 255, 255, 0.15);
-webkit-backdrop-filter: blur(12px) saturate(130%);
backdrop-filter: blur(12px) saturate(130%);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 24px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
}
/* backdrop-filter に未対応のブラウザ向けのフォールバック */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass-card {
background: rgba(255, 255, 255, 0.75);
}
}Safari向けの -webkit- 接頭辞と、backdrop-filter 非対応環境向けのフォールバックを含めて出力しています。
ぼかしと質感
背景の色を鮮やかにし、透過を美しく見せます
暗い背景で文字を読みやすくしたいときに上げます
値が大きいほど背景が隠れて文字が読みやすくなります
枠線と形状
書き出し設定
ダーク対応を選ぶと、prefers-color-scheme に応じてガラス面を暗くする記述が追加されます。
すりガラス風CSS生成ツール（backdrop-filter・グラスモーフィズム）とは？
本ツールは、CSSのbackdrop-filterを使って背面をぼかす、いわゆるすりガラス風の表現（グラスモーフィズム）をGUIで設計できるジェネレーターです。ぼかし、彩度、明るさ、ガラス面の不透明度、枠線、角丸、影をスライダーで調整し、結果をその場で確認できます。
単体のカードだけでなく、固定ヘッダー・モーダル背景・サイドバー・通知トーストの用途別プリセットを用意しており、position や z-index を含む実装可能なコードとして出力します。さらに、Safari向けの接頭辞とbackdrop-filter非対応環境へのフォールバックを自動で付与するため、「Chromeでは見えるのにSafariで効かない」といった典型的なつまずきを防げます。
あわせて、設定値と背景の明るさから推奨の文字色とコントラスト比を自動判定します。透明感を追求した結果として文字が読めなくなる失敗を、数値で確認しながら避けられます。
こんなシーンで便利です
スクロールしても残る固定ヘッダー
本文が背後を流れても見出しが埋もれない、iOS風の半透明ナビゲーション。不透明度の目安も判定つきで確認できます。
モーダル・ダイアログの背景
背面のコンテンツを強くぼかして視線をダイアログへ集めます。position: fixed を含むコードとして出力されます。
ヒーローエリアのカード
印象的な背景画像の上に、可読性を保ったままキャッチコピー領域を配置できます。
ダッシュボードのウィジェット
情報量の多い画面でも、ガラス調のパネルで軽やかさと階層の区別を両立させられます。
使い方は簡単 4ステップ
- 用途プリセット（カード・固定ヘッダー・モーダル背景など）を選びます。
- 背景を切り替えて、実際の配置環境に近い明るさで見え方を確認します。
- ぼかし・彩度・明るさ・不透明度を調整し、コントラスト判定が基準を満たすか確認します。
- 枠線や角丸、影で輪郭を整え、CSS・Tailwind・HTMLのいずれかをコピーします。
※プレビュー背面の図形はゆっくり動きます。背景が変化したときにぼかしがどう追従するかを確認するためのもので、動きを減らす設定を有効にしている環境では停止します。
ご利用時の注意点
- Safari対応：生成コードには -webkit-backdrop-filter と標準の backdrop-filter を併記しています。接頭辞つきの記述を先に置くのが安全です。
- フォールバック：@supports を使い、backdrop-filter に対応しない環境ではガラス面を濃くして文字が読める状態を保つコードを自動で付与します。
- 文字色の考え方：ガラス面を通した見た目の明るさから推奨の文字色を判定していますが、背景画像は場所によって明るさが変わります。実際に配置する画像でも必ず確認してください。
- 重ね順：backdrop-filter は要素が独立した重ね合わせ文脈を作ります。親要素に overflow: hidden や filter が指定されていると期待どおりに効かない場合があるため、効かないときはまず親要素を確認してください。
- 影のみで立体感を出したい場合や、背景を同色にして浮かせる表現にはbox-shadow・CSS影の生成ツール、ホバー時の動きにはCSSホバーエフェクト生成ツールをご利用ください。
用途別のすりガラス設定値の目安
同じすりガラスでも、背後に何があるかによって適切な数値は変わります。本ツールのプリセットもこの考え方に基づいています。
| 用途 | ぼかし | ガラス面の不透明度 | 設計上のポイント |
|---|---|---|---|
| カード（画像の上） | 10〜16px | 0.10〜0.20 | 透明感を優先。枠線1pxで輪郭を出す |
| 固定ヘッダー | 14〜20px | 0.50〜0.70 | 本文が流れるため濃いめに。下辺のみ枠線 |
| モーダル背景 | 16〜24px | 0.20〜0.35 | 背面を強くぼかし視線を集める。枠線なし |
| サイドバー | 16〜20px | 0.15〜0.25 | 縦に長いため、上下で明るさが変わらないか確認 |
| 通知トースト | 8〜12px | 0.30〜0.45 | 小さく短時間表示。読みやすさを最優先 |
| 彩度（共通） | 130〜180% | — | 背景の色を引き出し、透過を美しく見せる |
| 角丸（共通） | 12〜24px | — | モダンなUIの標準値。ヘッダーは0でも可 |
【filter と backdrop-filter の違い】filter: blur() は要素そのものをぼかすため、中に置いた見出しやボタンまで一緒にぼやけてしまいます。すりガラス表現に必要なのは要素の背面だけをぼかす backdrop-filter です。「文字までぼやける」という相談の大半は、この2つの取り違えが原因です。
【効かないときに最初に確認する3点】
第一に、-webkit-backdrop-filter を併記しているか（Safari）。第二に、ガラス面の背景が完全に不透明になっていないか。背後が見えなければぼかしも見えません。第三に、親要素に filter や overflow の指定がないか。これらは重ね合わせ文脈に影響し、背面の取得を妨げることがあります。
すりガラス表現を実プロダクトへ導入する際のパフォーマンスと可読性の設計指針
見た目の完成度だけでなく、描画負荷、可読性、テーマ切り替えまで含めて破綻させないための実務的な考え方を整理します。
backdrop-filterの描画コストと、適用範囲を絞るという原則
backdrop-filter は、スクロールやアニメーションのたびに背面のピクセルを取得して再計算するため、box-shadowやopacityと比べて描画コストが際立って高いプロパティです。一覧のカード全件へ適用すると、低スペック端末でスクロールが目に見えてカクつきます。
対策は、画面内に同時に存在する数を絞ること。ヘッダー、モーダル、サイドバーなど常時1つか2つに限定し、繰り返し要素には半透明の背景色だけで代替する設計が現実的です。どうしても必要な場合は will-change: transform でレイヤーを分離すると改善することがありますが、指定しすぎるとメモリを圧迫するため限定的に使ってください。
背景が動く環境で可読性を担保するための二重構造
カルーセルや動画を背景に敷く場合、フレームごとに明るさが変わるため、ある瞬間だけ文字が背景と同化することがあります。静止画で確認して問題なくても、実際の再生中に破綻するのはこのためです。
確実な対策は、ガラス面のさらに背面に極薄のグラデーションレイヤーを一枚挟むことです。上から下へ黒を10パーセント程度かけるだけで、背景がどう変化しても最低限の明暗差が保たれます。本ツールの明るさ調整と組み合わせれば、透明感を大きく損なわずに可読性を確保できます。
デザインツールのぼかし値をそのまま移植すると印象が変わる理由
Figmaなどで指定した背景のぼかしと、ブラウザの backdrop-filter: blur() は描画エンジンが異なるため、同じ数値でも見え方が一致しません。一般にデザインツール側の値の方が強く出る傾向があり、そのまま移植すると「実装が薄い」という指摘につながります。
数値を絶対視せず、本ツールのプレビューで実際のブラウザ描画を確認しながら調整してください。おおむねデザインツール上の値の半分前後から試し、見た目が一致する地点を探すのが実務的な手順です。
ライトとダークの両方でガラスを成立させる変数設計
白いガラスをダークモードでそのまま使うと、画面から強く浮いて眩しく見えます。逆に黒いガラスをライトモードで使うと、ただの影のように見えます。ベースカラーはテーマごとに切り替えるのが前提です。
実装では rgba(255,255,255,0.2) のような固定値ではなく、rgba(var(--glass-rgb), 0.2) のようにRGB部分だけを変数へ切り出すと、アルファ値を保ったままテーマを切り替えられます。Tailwindなら bg-white/20 dark:bg-black/25 の形が簡潔です。本ツールのダーク対応を選ぶと、この切り替えを含むコードが出力されます。
すりガラス表現の実装でよくある失敗と対策
Safariでぼかしが効かず、ただの半透明になってしまう失敗
ChromeやEdgeでは意図どおりに見えるのに、iPhoneやMacのSafariでは背景がぼけず単なる半透明の板になるケースです。標準のbackdrop-filterだけを記述している場合に発生し、確認端末がAndroidとWindowsに偏っていると気づかないまま公開してしまいます。
💡 対策・解決策を見る▼
filterとbackdrop-filterを取り違えて、中の文字までぼやける失敗
背面だけをぼかしたいのにfilterを指定してしまい、要素の中に置いた見出し、本文、ボタンまで一緒にぼやけて判読できなくなるケースです。数値を下げても中身がぼやける以上は解決せず、原因にたどり着けないまま透明度の調整を繰り返してしまいがちです。
💡 対策・解決策を見る▼
透明感を優先しすぎて、文字のコントラストが不足する失敗
高級感を求めてガラス面の不透明度を下げすぎた結果、背景の明るい部分で白い文字が消えてしまうケースです。制作環境のディスプレイでは読めても、屋外のスマートフォンや弱視の方の環境では判読できず、アクセシビリティの基準を満たさない状態になります。
💡 対策・解決策を見る▼
一覧の全カードへ適用して、スクロールがカクつく失敗
見た目の統一感を狙ってカード一覧のすべてにすりガラスを適用した結果、スクロールのたびに背面のピクセル計算が全件分走り、特に低スペック端末でフレーム落ちが発生するケースです。要素数が増えるほど劣化が加速します。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.Safariですりガラスのぼかしが効かないのはなぜですか
A. Safariではベンダー接頭辞のついた指定が必要なためです。標準のbackdrop-filterだけを書いていると、iPhoneやMacのSafariでは単なる半透明として表示され、ぼかしがかかりません。本ツールが生成するコードには接頭辞つきの記述と標準の記述の両方が含まれているため、貼り付けるだけでこの問題を回避できます。あわせて、backdrop-filterに対応していない環境向けに背景を濃くするフォールバックも自動で付与されます。
Q.固定ヘッダーやモーダルの背景ぼかしもこのツールで作れますか
A. 作れます。用途プリセットから固定ヘッダー、モーダル背景、サイドバー、通知トーストを選ぶと、ぼかしや透明度がその用途に適した値へ切り替わるだけでなく、position や z-index といったレイアウト用の記述もCSSに含めて出力されます。HTMLタブでは、そのまま使える最小限のマークアップ例も確認できます。
Q.ぼかしと透明度はどのくらいの値にするのが適切ですか
A. 一般的にはぼかしが10ピクセルから20ピクセル、ガラス面の不透明度が0.1から0.3の範囲が扱いやすい目安です。ただし固定ヘッダーのように背後に本文が流れる要素では、不透明度を0.5から0.7程度まで上げないと文字が読みづらくなります。本ツールは設定に応じて推奨の文字色とコントラスト比を自動で判定するため、数値を動かしながら読みやすさを確認できます。
Q.背景を暗くしたり明るくしたりする調整もできますか
A. できます。彩度に加えて明るさの調整に対応しており、暗い写真の上に白い文字を置く場合は明るさを上げる、明るい背景で黒い文字を置く場合は下げるといった補正が可能です。これらはbackdrop-filterの中で背面に対して適用されるため、ガラス面に載せた文字やアイコン自体はぼけたり色が変わったりしません。
Q.生成したCSSをダークモードにも対応させられますか
A. できます。書き出し設定でダーク対応を選ぶと、prefers-color-schemeの指定に応じてガラス面のベースカラーを暗い色へ切り替える記述が追加されます。白いガラスをそのままダークモードで使うと画面から浮きすぎるため、暗い側では黒ベースに切り替え、枠線の不透明度も控えめにする構成としています。
Q.入力した設定値が外部に送信されることはありますか
A. ありません。本ツールのパラメータ調整とコード生成は、すべてお使いのブラウザ内で完結する完全ローカル処理型です。データが外部サーバーへ送信されることも保存されることもなく、プレビューの背景もCSSのグラデーションで描いているため外部の画像を読み込みません。社内の非公開プロジェクトでも安全にご利用いただけます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。