CodeKitHubこのツールとは？
グラスモーフィズムとは、要素がすりガラスのように見えるUIスタイルです。半透明の背景によって背後の色が透けて見え、backdrop-filter: blur()がその背景をぼかすことで、単なる透明パネルではなくガラスとして認識されます。薄く半透明なボーダーと丸い角を加えることで、この見た目が完成します。
このツールを使えば、その効果をビジュアルに作れます。プレビューがあえて動くグラデーション背景の上に置かれているのは、ぼかしを見えるようにするためです——グラスモーフィズムは、真っ白なページの上ではなく、背後に色や情報がある場所でしか正しく見えません。背景色の不透明度、ぼかしの強さ、ボーダーの不透明度、角丸の半径を調整し、生成されたCSSをコピーしてください。
出典: Filter Effects Module Level 1, W3C — この効果の基盤であるbackdrop-filterを定義しています。
なぜこれを使うのか？
- カラフルに動くグラデーション背景の上でライブプレビューできるため、空白の背景でぼかし値を推測するのではなく、すりガラス効果を実際に確認しながら調整できます。
- 背景の不透明度、backdrop-filterのぼかし強度、ボーダーの不透明度、border-radiusを一箇所でまとめてコントロールできます。
- backdrop-filterと-webkit-backdrop-filterプレフィックスの両方を自動で出力するため、Safariのサポートを忘れません。
- すべてブラウザ内で完結——設定した内容はどこにもアップロードされません。
- 無料、登録不要、モバイルでも動作します。
使い方
- 背景色を選び、不透明度を調整します——不透明度が低い（10〜25%）とガラスらしく見え、高いと色付きの不透明なパネルに近くなります。
- ぼかし強度を上げて要素の背後をぼかします——これが透明度そのものとは別に、すりガラスらしい見た目を実際に作り出す要素です。
- ボーダーの不透明度を調整して淡い光の縁を加えます。これによりガラスカードが背景に溶け込まず、独立した面として認識されやすくなります。
- border-radiusを設定して角を丸めます——グラスモーフィズムのカードはほぼ常に角丸で、角ばったものはまれです。
- 生成されたCSSをコピーしてスタイルシートに貼り付けます。要素の背後には色や質感のある何かが必要な点を忘れないでください——単色のフラットな背景の上では、グラスモーフィズムは見えません。
例
入力
背景: 白、不透明度20% · ぼかし: 10px · ボーダー不透明度: 30% · 角丸: 16px出力
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;ログイン画面のパネル、ナビゲーションバー、ダッシュボードのウィジェットなど、カラフルまたは写真の背景の上でよく使われる定番のすりガラスカードスタイルです。
Safariとブラウザサポート
backdrop-filterは現行のChrome、Firefox、Edge、Safariでサポートされていますが、Safariではぼかしを描画するために接頭辞なしのプロパティに加えて-webkit-backdrop-filterプレフィックスが従来から必要でした——これがないと古いSafariはぼかしを無視して、単なる透明な背景しか表示しません。そのため、このツールは常に両方の宣言を出力します。
現在のブラウザ対応状況の詳細はMDNのbackdrop-filterドキュメントを参照してください: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
グラスモーフィズムに背景が必要な理由
backdrop-filterは、要素の視覚的な背後にあるもの——背景画像、グラデーション、別の色付き要素、下にスクロールしているコンテンツなど——だけをぼかします。真っ白や単色の背景の上ではぼかす対象が何もないため効果は見えず、要素は少し色の付いた角丸のボックスにしか見えません。効果をきちんと見せるには、グラスモーフィズムの要素は必ずグラデーション、写真、または情報量の多い背景の上に配置してください。
他のCSSエフェクトとの組み合わせ
グラスモーフィズムのカードは、奥行きを出すために下に控えめなbox-shadowを組み合わせるのが一般的です。ここですりガラスのCSSを生成したら、Box Shadow ジェネレーターで柔らかい影を追加し、両方の宣言を同じ要素に適用してください。
よくある質問
ページ上でガラス効果が見えないのはなぜですか？
backdrop-filterは要素の背後にあるものをぼかします。要素が真っ白や単色の背景の上に置かれている場合、ぼかす対象となる視覚的な情報がないため、うっすら色の付いた箱にしか見えません。すりガラス効果を見せるには、グラデーション、画像、その他情報量のある背景の上に配置してください。
-webkit-backdrop-filterプレフィックスは必要ですか？
Safariで効果を確実に表示させたいなら必要です。このツールは標準のbackdrop-filterと-webkit-プレフィックス付きのバージョンを常に一緒に出力します。Safariでは従来からこのプレフィックスがないとぼかしが適用されないためです。
背景の不透明度とぼかしの違いは何ですか？
背景の不透明度は、選んだ色味がどれだけ強く出るか、逆に背後がどれだけそのまま透けて見えるかを制御します。ぼかしは、その透けて見える背景をどれだけにじませ・柔らかくするかを制御します。グラスモーフィズムはどちらか一方ではなく、透明度とぼかしの両方を組み合わせて使います。
backdrop-filterはどんな要素にも使えますか？
はい、ただし影響が及ぶのはページの描画上でその要素の視覚的な背後にあるものだけで、要素自身の子要素には影響しません。また、多くの要素に適用したり頻繁にアニメーションさせたりすると、一部のデバイスではパフォーマンスコストがかかるため、小さな要素を大量にではなく、カードやモーダル、ナビゲーションバーのような目立つUI面を少数だけに使うのがおすすめです。
ボーダーがほとんど見えないのはなぜですか？
このツールのボーダーは半透明の白を使っており、これは意図的に控えめにしてあります——ガラスパネルを硬く不透明な輪郭ではなく、独立した面として認識させるための淡い縁です。もっとはっきりした縁にしたい場合はボーダーの不透明度スライダーを上げてください。