Pricing Glass
Tiered pricing card with featured glass treatment — the middle plan reads "premium" through stronger glass + brighter rim.
The code
<div class="gm-price-bg">
<div class="gm-price">
<div class="gm-price__tag">Pro</div>
<div class="gm-price__amount">$19<span>/mo</span></div>
<ul class="gm-price__list">
<li>Unlimited projects</li>
<li>Priority support</li>
<li>Custom domains</li>
</ul>
<button class="gm-price__btn">Choose Pro</button>
</div>
</div> <div class="gm-price-bg">
<div class="gm-price">
<div class="gm-price__tag">Pro</div>
<div class="gm-price__amount">$19<span>/mo</span></div>
<ul class="gm-price__list">
<li>Unlimited projects</li>
<li>Priority support</li>
<li>Custom domains</li>
</ul>
<button class="gm-price__btn">Choose Pro</button>
</div>
</div>.gm-price-bg {
position: relative; padding: 28px;
border-radius: 18px; overflow: hidden;
background:
radial-gradient(circle at 30% 20%, #14b8a6 0%, transparent 50%),
radial-gradient(circle at 80% 80%, #06b6d4 0%, transparent 50%),
#042f2e;
}
.gm-price {
background: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(24px) saturate(180%);
backdrop-filter: blur(24px) saturate(180%);
border: 1.5px solid rgba(255, 255, 255, 0.28);
border-radius: 14px;
padding: 18px 20px;
color: #fff;
box-shadow: 0 12px 36px rgba(20, 184, 166, 0.25);
}
.gm-price__tag {
display: inline-block;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 4px 10px; border-radius: 12px;
font: 600 10px system-ui, sans-serif;
letter-spacing: 0.08em; text-transform: uppercase;
margin-bottom: 10px;
}
.gm-price__amount { font: 800 28px/1 system-ui, sans-serif; margin-bottom: 14px; }
.gm-price__amount span { font-size: 12px; opacity: 0.65; font-weight: 500; }
.gm-price__list { list-style: none; padding: 0; margin: 0 0 14px; font: 12px/1.8 system-ui, sans-serif; opacity: 0.85; }
.gm-price__list li::before { content: '✓ '; color: #5eead4; font-weight: 700; }
.gm-price__btn {
width: 100%;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.32);
color: #fff;
padding: 9px; border-radius: 8px;
font: 600 12px system-ui, sans-serif; cursor: pointer;
}
.gm-price__btn:hover { background: rgba(255, 255, 255, 0.3); } .gm-price-bg {
position: relative; padding: 28px;
border-radius: 18px; overflow: hidden;
background:
radial-gradient(circle at 30% 20%, #14b8a6 0%, transparent 50%),
radial-gradient(circle at 80% 80%, #06b6d4 0%, transparent 50%),
#042f2e;
}
.gm-price {
background: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(24px) saturate(180%);
backdrop-filter: blur(24px) saturate(180%);
border: 1.5px solid rgba(255, 255, 255, 0.28);
border-radius: 14px;
padding: 18px 20px;
color: #fff;
box-shadow: 0 12px 36px rgba(20, 184, 166, 0.25);
}
.gm-price__tag {
display: inline-block;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 4px 10px; border-radius: 12px;
font: 600 10px system-ui, sans-serif;
letter-spacing: 0.08em; text-transform: uppercase;
margin-bottom: 10px;
}
.gm-price__amount { font: 800 28px/1 system-ui, sans-serif; margin-bottom: 14px; }
.gm-price__amount span { font-size: 12px; opacity: 0.65; font-weight: 500; }
.gm-price__list { list-style: none; padding: 0; margin: 0 0 14px; font: 12px/1.8 system-ui, sans-serif; opacity: 0.85; }
.gm-price__list li::before { content: '✓ '; color: #5eead4; font-weight: 700; }
.gm-price__btn {
width: 100%;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.32);
color: #fff;
padding: 9px; border-radius: 8px;
font: 600 12px system-ui, sans-serif; cursor: pointer;
}
.gm-price__btn:hover { background: rgba(255, 255, 255, 0.3); }