2026 仕様 ガラスモーフィズムカード
backdrop-filter: blur() で実装するすりガラス風カード。ブラー背景 + 半透明 + ボーダー光沢の三点セットで、SaaS / 料金プランで目を引く演出。
解説
背景の鮮やかなグラデーションが透けて見える、すりガラス調のカードです。中心になる技術は backdrop-filter:blur() で、カード自体を半透明にしつつ、その背後にあるものをぼかして「磨りガラス越しに覗いている」ような質感を作ります。背景側には filter:blur() をかけた大きな円形の光彩を ::before と ::after で配置し、透けたときに色の濃淡が出るよう演出しています。料金プランの提示にふさわしい、軽やかで上質な見え方が得られます。
料金表やヒーロー領域の見出しカード、画像や動画の上に重ねる情報パネルなど、背景の色みを活かしつつ前面の情報を浮かせたい場面に向きます。フラットなカードより奥行きが出て、装飾過多にならずに今っぽい印象を与えられます。
カスタマイズと注意点
- ガラスの濃さは
backgroundの不透明度とblurの量で調整します。透明度を上げすぎると文字が読みにくくなるので注意します。 - 背景の光彩の色や位置は
::beforeと::afterを編集します。 backdrop-filterはぼかし処理のため描画負荷が高めです。多用すると低性能な端末でカクつくことがあるので使用箇所は絞ります。背景が無地だと効果が出にくいので、色のある背景の上で使うのが前提です。文字色とのコントラストは必ず確保してください。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
すりガラスの透け具合を変えるにはどこを直しますか？
カードの background の白の不透明度（rgba の最後の値）と、backdrop-filter:blur() のぼかし量を調整します。透明度を上げるほど背景がよく透けますが、上げすぎると中の文字が読みにくくなるため、コントラストを確認しながら調整してください。
無地の背景でも使えますか？
効果は薄くなります。backdrop-filter は背後にある色や模様をぼかして見せる仕組みなので、背景が真っ白や単色だと透けても変化が分かりません。グラデーションや写真など、色みのある背景の上で使うのが前提の表現です。