グラスモーフィズム（ガラス質感）カード
すりガラス風カードの基本パターン。背景画像の上に半透明 + blur を重ねて奥行きを演出。SaaS・ポートフォリオ・ブランドサイトに。
解説
グラスモーフィズム（ガラス質感）カードは、UI コンポーネントカテゴリの「カード」に分類される実装パターンです。CSS のみで構成され、難易度はシンプルレベル。
backdrop-filter を使った半透明・ぼかしのガラス質感カード。Apple Big Sur UI 風の今っぽいトレンドデザイン。
シンプルなグラスモーフィズム実装です。backdrop-filter: blur(...) + 半透明背景 + 薄いボーダーの 3 点で「ガラス板が浮いている」表現を作ります。
背景画像の上に重ねる前提で設計されているので、ブランド写真・グラデーション・装飾 SVG など何でも下に敷くと映えます。
仕組み
下記コードタブから HTML / CSS をそれぞれ確認・コピーできます。プレビュー領域では実際の動作をその場で確認可能です。
CSS プロパティだけで完結しているため、フレームワーク非依存・軽量に組み込めます。React / Vue / Astro / 静的 HTML どれにも持ち込み可能です。
注意点 / カスタマイズ時のポイント
Safari 用に -webkit-backdrop-filter を併記。背景がない（白背景の上に置く）と効果が見えないので、必ず背景画像/グラデーションが必要です。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
ぼかしの強さを調整したい
blur(20px) の数値を変えるだけです。10px = 軽め、20px = 標準、40px = 強め。スマホでは数値を下げると軽くなります。このスニペットは商用利用できますか？
はい。moatway がオリジナルで制作したスニペットは商用・個人問わず自由にご利用いただけます。クレジット表記も不要です。
そのまま貼り付ければ動きますか？
はい。HTML / CSS / JS タブのコードをそれぞれ自分のファイルにコピーして貼り付ければ動きます。クラス名が他の CSS と衝突しないよう、必要に応じてリネームしてください。
ブラウザ対応は？
最新 2 世代の Chrome / Safari / Firefox / Edge で動作確認しています。Internet Explorer はサポート対象外です。
Tailwind CSS でも実装できますか？
可能です。クラスベースのスタイルを Tailwind のユーティリティクラスに置き換えれば同じ動作になります。アニメーション・疑似要素については
@apply や arbitrary values が必要な場合があります。