Glass Card
The canonical glass surface — translucent white over a vivid aurora gradient. Backdrop-filter blur is what sells the effect.
The code
<div class="gm-card-bg">
<div class="gm-card">
<div class="gm-card__icon">✦</div>
<h3 class="gm-card__title">Aurora Pass</h3>
<p class="gm-card__body">All collections, every generator, premium tools.</p>
<button class="gm-card__btn">Get started</button>
</div>
</div> <div class="gm-card-bg">
<div class="gm-card">
<div class="gm-card__icon">✦</div>
<h3 class="gm-card__title">Aurora Pass</h3>
<p class="gm-card__body">All collections, every generator, premium tools.</p>
<button class="gm-card__btn">Get started</button>
</div>
</div>.gm-card-bg {
position: relative; padding: 32px;
border-radius: 18px; overflow: hidden;
background:
radial-gradient(ellipse at 18% 20%, #8b5cf6 0%, transparent 55%),
radial-gradient(ellipse at 82% 30%, #ec4899 0%, transparent 55%),
radial-gradient(ellipse at 50% 90%, #06b6d4 0%, transparent 55%),
#0f0f1a;
}
.gm-card {
background: rgba(255, 255, 255, 0.08);
-webkit-backdrop-filter: blur(20px) saturate(160%);
backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 14px;
padding: 22px 24px;
color: #f8fafc;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.gm-card__icon {
width: 38px; height: 38px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
display: grid; place-items: center;
font-size: 18px; margin-bottom: 14px;
}
.gm-card__title { margin: 0 0 6px; font: 700 16px/1.2 system-ui, sans-serif; }
.gm-card__body { margin: 0 0 14px; font: 12px/1.55 system-ui, sans-serif; opacity: 0.78; }
.gm-card__btn {
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #fff;
padding: 8px 16px; border-radius: 8px;
font: 600 12px system-ui, sans-serif;
cursor: pointer;
transition: background 0.2s;
}
.gm-card__btn:hover { background: rgba(255, 255, 255, 0.28); } .gm-card-bg {
position: relative; padding: 32px;
border-radius: 18px; overflow: hidden;
background:
radial-gradient(ellipse at 18% 20%, #8b5cf6 0%, transparent 55%),
radial-gradient(ellipse at 82% 30%, #ec4899 0%, transparent 55%),
radial-gradient(ellipse at 50% 90%, #06b6d4 0%, transparent 55%),
#0f0f1a;
}
.gm-card {
background: rgba(255, 255, 255, 0.08);
-webkit-backdrop-filter: blur(20px) saturate(160%);
backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 14px;
padding: 22px 24px;
color: #f8fafc;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.gm-card__icon {
width: 38px; height: 38px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
display: grid; place-items: center;
font-size: 18px; margin-bottom: 14px;
}
.gm-card__title { margin: 0 0 6px; font: 700 16px/1.2 system-ui, sans-serif; }
.gm-card__body { margin: 0 0 14px; font: 12px/1.55 system-ui, sans-serif; opacity: 0.78; }
.gm-card__btn {
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #fff;
padding: 8px 16px; border-radius: 8px;
font: 600 12px system-ui, sans-serif;
cursor: pointer;
transition: background 0.2s;
}
.gm-card__btn:hover { background: rgba(255, 255, 255, 0.28); }