{
CF
}
Code
Fronts
Back to CSS Glassmorphism
Glass Card
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.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); }
<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>
Live preview
Ready