Glassmorphism Card

<div class="gm"><div class="gm-icon">✦</div><h3>Glass Card</h3><p>Frosted glassmorphism with a blurred backdrop, subtle border and soft inner glow.</p><button>Explore</button></div>

body{background:linear-gradient(135deg,#7b2ff7,#f107a3 60%,#ff7a18);min-height:100vh}
.gm{width:290px;padding:30px;border-radius:22px;background:rgba(255,255,255,.12);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.25);box-shadow:0 8px 32px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.3);color:#fff;font-family:system-ui,sans-serif}
.gm-icon{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:22px;margin-bottom:16px}
.gm h3{margin:0 0 8px;font-size:22px}
.gm p{margin:0 0 20px;line-height:1.6;opacity:.9;font-size:14px}
.gm button{padding:11px 22px;border:0;border-radius:11px;background:#fff;color:#7b2ff7;font-weight:700;cursor:pointer}