Liquid Glass Card

DEMO

CODE

<div class="demo-stage lqg-stage">
  <div class="lqg-bg" aria-hidden="true"></div>
  <div class="lqg-card">
    <p class="lqg-label">LIQUID GLASS</p>
    <p class="lqg-text">Specular highlight + backdrop blur</p>
  </div>
</div>

.lqg-stage { position:relative; display:flex; align-items:center; justify-content:center; min-height:300px; background:#0F0F12; overflow:hidden; }
.lqg-bg {
  position:absolute; inset:-20%;
  background:
    radial-gradient(circle at 30% 40%, rgba(233,27,137,.75) 0, transparent 34%),
    radial-gradient(circle at 70% 62%, rgba(123,55,168,.8) 0, transparent 38%),
    radial-gradient(circle at 56% 22%, rgba(91,170,222,.7) 0, transparent 30%);
  filter:blur(30px);
  animation: lqg-drift 9s ease-in-out infinite alternate;
}
@keyframes lqg-drift { from { transform:translate3d(-4%,-3%,0) scale(1); } to { transform:translate3d(4%,3%,0) scale(1.1); } }
.lqg-card {
  position:relative; width:min(300px,82%); padding:1.9rem 1.7rem; border-radius:22px; overflow:hidden;
  background:rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(255,255,255,.08), 0 18px 40px rgba(0,0,0,.35);
}
.lqg-card::before {
  content:''; position:absolute; top:-60%; left:-60%; width:55%; height:220%;
  transform:rotate(24deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent);
  animation: lqg-sheen 4.5s ease-in-out infinite;
}
@keyframes lqg-sheen { 0%, 50% { left:-60%; } 82%, 100% { left:130%; } }
.lqg-label { position:relative; font-family:'Oswald',sans-serif; font-size:.75rem; letter-spacing:.3em; color:#fff; margin:0 0 .6rem; }
.lqg-text { position:relative; color:rgba(255,255,255,.75); font-size:.85rem; margin:0; }

AI PROMPT

Apple調のリキッドガラス（liquid glass）カードをCSSだけで作って。カードは background: rgba(255,255,255,.08) ＋ backdrop-filter: blur(18px) saturate(160%)（-webkit- 併記）で背景を屈折風にぼかす。ガラスの厚みは box-shadow の inset ハイライト2本（上端 rgba(255,255,255,.35)・下端 .08）と border: 1px solid rgba(255,255,255,.28) で表現する。「液体」の質感は ::before の斜めハイライト（rotate(24deg) した linear-gradient の白帯）を数秒おきに横断させて出す。背景には radial-gradient のカラーブロブを filter: blur で溶かして ゆっくり drift させると、ガラス越しの色の流れが見える。backdrop-filter 非対応環境向けに背景色だけでも成立する濃度にしておく。料金カード・ログインパネル・ウィジェットに。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。