グラスモーフィズムとは？CSSですりガラス風のUIを作る
グラスモーフィズムは、半透明の板の向こうの景色がぼけて見える「すりガラス」の質感を、画面の部品に持たせるデザインです。CSS では、背後をぼかす backdrop-filter: blur() と、半透明の背景色、細く明るい枠線を組み合わせて作ります。
このツールでは、ぼかしの強さ・透明度・彩度・枠線・角丸をスライダーで動かしながら、背後に色や画像を置いた状態で見え方を確認できます。できあがった HTML と CSS はボタン1つでコピーでき、プレビューを PNG 画像として保存することもできます。処理はブラウザの中だけで行い、設定がサーバーに送られることはありません。
生成したコードの使い方
- 見た目を決める。プリセット（20種）から近いものを選び、ぼかし・透明度・枠線などを調整します。
- HTML と CSS をコピーする。「HTML」と「CSS (Glass Styles)」の Copy ボタンを押し、自分のページに貼り付けます。HTML は
<div class="glass-card">の形で出力されます。 - 背後に模様のある要素を置く。
backdrop-filterは「要素の後ろに見えているもの」をぼかす指定です。背景が単色だとぼけ方が分からないので、写真やグラデーションの上に重ねて使います。
出力される CSS には、Safari の古いバージョン向けに -webkit-backdrop-filter も一緒に書かれています。消さずにそのまま使ってください。
ブラウザ対応
| ブラウザ | backdrop-filter に対応したバージョン |
|---|---|
| Chrome・Edge | Chrome 76 以降・Edge 79 以降 |
| Safari（Mac・iPhone） | 18 以降 9〜17 は -webkit- 付きで対応 |
| Firefox | 103 以降 |
出典: MDN の互換性データ（browser-compat-data 8.1.2、2026年9月時点）。いま使われている主なブラウザはすべて対応しています。
よくある質問 (FAQ)
ぼかす対象が後ろに無いか、ガラスが不透明になっていることがほとんどです。
backdrop-filter は要素の後ろに見えているものをぼかすので、背景が単色だと変化が見えません。写真やグラデーションの上に重ねてください。
また、背景色の不透明度が 100% に近いと、後ろがほとんど透けないためぼかしも見えません。
Safari 17 以前にも対応させるなら必要です。Safari は 18 から接頭辞なしの
backdrop-filter に対応し、それより前は -webkit-backdrop-filter だけが効きます。
このツールは両方を出力するので、そのまま貼れば古い Safari でもぼかしが効きます。
ぼかしを強くするか、ガラスの不透明度を上げて背景色を濃くします。背後の模様がはっきり見えるほど、上に載せた文字は読みにくくなります。
明るい背景には暗いガラス、暗い背景には明るいガラスを合わせると、文字との差がつきやすくなります。
広い面積や多くの要素に使うと、端末によっては重くなることがあります。ぼかしは後ろの内容が動くたびに計算し直されるためです。
カードやナビゲーションなど、要所に絞って使うのがおすすめです。