DEMO
backdrop-filterで背景をぼかした磨りガラス風の半透明カード。
CODE
<div class="demo-stage gm-stage"><div class="gm-card"><h3>GLASS UI</h3><p>backdrop-filterで背景をぼかした磨りガラス風の半透明カード。</p></div></div>
.gm-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:linear-gradient(135deg,#E91B89 0%,#7B37A8 50%,#5BAADE 100%); }
.gm-card { width:280px; padding:2.4rem 2rem; background:rgba(255,255,255,.14); backdrop-filter:blur(13px); -webkit-backdrop-filter:blur(13px); border:1px solid rgba(255,255,255,.32); border-radius:18px; color:#fff; box-shadow:0 8px 32px rgba(0,0,0,.18); }
.gm-card h3 { font-family:'Oswald',sans-serif; font-size:1.5rem; letter-spacing:.1em; margin-bottom:.6rem; }
.gm-card p { font-size:.85rem; line-height:1.7; opacity:.92; }
AI PROMPT
グラスモーフィズム（磨りガラス）カードを作って。カラフルなグラデ背景の上に、background:rgba(255,255,255,.14)+backdrop-filter:blur(13px)のカードを重ねる。border:1px solid rgba(255,255,255,.32)で縁、border-radius:18px、box-shadowで浮遊感。-webkit-backdrop-filterも併記。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスク
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
背景を磨りガラス状にぼかす半透明カード。モダンなダッシュボード・ヒーローUIで人気のスタイル。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。
商品カード・記事一覧・料金プラン・チームメンバー紹介など、カード型UIの一覧表示に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。