グラスモーフィズム（ガラス質感）カード
すりガラス風カードの基本パターン。背景画像の上に半透明 + blur を重ねて奥行きを演出。SaaS・ポートフォリオ・ブランドサイトに。
解説
グラスモーフィズムカードは、すりガラス越しに背景が透けて見えるような半透明カードです。鍵になるのは backdrop-filter:blur(16px) saturate(180%) で、これがカードの背後にある景色をぼかし、彩度を上げて「曇りガラス」の質感を作ります。カード自体は background:rgba(255,255,255,.18) という薄い白で、わずかな白枠 border とソフトな影を添えることで、浮いているガラス板のように見せています。Safari 対応のため -webkit-backdrop-filter も併記されています。CSS のみで JavaScript は不要です。
合う背景・場面
- グラデーションや写真など、情報量のある背景の上に重ねるカード
- ヒーローやヒーローの上に重ねるログイン・申込カード
- Apple 風・今っぽい雰囲気を出したい LP のパネル
透け具合は背景の rgba のアルファ値（既定 .18）とぼかし量 blur(16px) で調整します。注意したいのは、ガラスは背後があってこそ成立する点。無地の上に置くと効果が見えません。また半透明は文字とのコントラストが落ちやすいので、文字色や影で可読性を確保してください。backdrop-filter は描画負荷が高めなので、画面に多数並べるのは避けるのが無難です。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
ぼかしが効かないことがあるのはなぜですか
backdrop-filterは背後に透ける要素がないと効果が見えません。無地の背景の上では何もぼけないため、グラデーションや写真など情報のある背景の上に重ねてください。古いブラウザでは未対応の場合もあります。
透明度やぼかしの強さは変えられますか
カードのbackground:rgba(...)のアルファ値（既定0.18）で透け具合を、backdrop-filterのblur(16px)でぼかしの強さを調整できます。半透明にすると文字が読みにくくなるので、コントラストも合わせて確認しましょう。