2026 仕様 ガラスモーフィズムカード
backdrop-filter: blur() で実装するすりガラス風カード。ブラー背景 + 半透明 + ボーダー光沢の三点セットで、SaaS / 料金プランで目を引く演出。
解説
2026 仕様 ガラスモーフィズムカードは、UI コンポーネントカテゴリの「カード」に分類される実装パターンです。CSS のみで構成され、難易度はシンプルレベル。
グラスモーフィズム（Glassmorphism）は、Apple の macOS Big Sur 以降で流行した「すりガラス + 半透明」のデザイントレンドです。backdrop-filter: blur() と半透明背景色・薄いボーダーの 3 点セットで、奥行きのある UI を演出できます。
このカードはサブスク料金プランを想定し、グラデーション背景の上に半透明のガラス板を重ねる構成です。価格を大きく見せ、機能リスト・CTA ボタンまでまとめて 1 カードに収めた、SaaS 系サイトでよく見るパターンです。
仕組み
下記コードタブから HTML / CSS をそれぞれ確認・コピーできます。プレビュー領域では実際の動作をその場で確認可能です。
CSS プロパティだけで完結しているため、フレームワーク非依存・軽量に組み込めます。React / Vue / Astro / 静的 HTML どれにも持ち込み可能です。
注意点 / カスタマイズ時のポイント
backdrop-filter は Safari では -webkit-backdrop-filter プレフィックス併記が必要です（プロパティ両方書く）。
背景がぼかし対象として機能するには、カード「下」に画像 / グラデーション / 別要素があることが前提です。真っ白な背景の上ではぼかし効果が見えないので、必ず背景に何かを置いてください。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
iOS Safari で backdrop-filter が効きません
iOS 9+ で対応していますが
-webkit- プレフィックスが必須です。CSS に必ず -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); の順で両方書いてください。パフォーマンスへの影響は？
backdrop-filter は GPU で処理されるため通常は軽量ですが、ぼかし範囲が広い・対象が複数あると描画コストが上がります。スマホで重く感じる場合は filter: blur() + 別レイヤーで代替するのも選択肢です。このスニペットは商用利用できますか？
はい。moatway がオリジナルで制作したスニペットは商用・個人問わず自由にご利用いただけます。クレジット表記も不要です。
そのまま貼り付ければ動きますか？
はい。HTML / CSS / JS タブのコードをそれぞれ自分のファイルにコピーして貼り付ければ動きます。クラス名が他の CSS と衝突しないよう、必要に応じてリネームしてください。
ブラウザ対応は？
最新 2 世代の Chrome / Safari / Firefox / Edge で動作確認しています。Internet Explorer はサポート対象外です。
Tailwind CSS でも実装できますか？
可能です。クラスベースのスタイルを Tailwind のユーティリティクラスに置き換えれば同じ動作になります。アニメーション・疑似要素については
@apply や arbitrary values が必要な場合があります。