- Unlimited projects
- Glass UI kit
- Priority support
- Custom domain
Glass Pricing Card
A frosted pricing card for a popular plan: price and call to action on the left, checked features on the right. A band of light sweeps across the glass every few seconds and the card lifts on hover.
Also known as: glassmorphism pricing card css, glass pricing table css, frosted pricing card.
HTML
<div class="gls-glass-pricing-card">
<span class="gls-glass-pricing-card-orb gls-glass-pricing-card-orb-a" aria-hidden="true"></span>
<span class="gls-glass-pricing-card-orb gls-glass-pricing-card-orb-b" aria-hidden="true"></span>
<article class="gls-glass-pricing-card-card">
<div class="gls-glass-pricing-card-plan">
<span class="gls-glass-pricing-card-badge">Most popular</span>
<p class="gls-glass-pricing-card-name">Pro</p>
<p class="gls-glass-pricing-card-price">$24<span>/mo</span></p>
<a class="gls-glass-pricing-card-cta" href="#">Start free trial</a>
</div>
<ul class="gls-glass-pricing-card-features">
<li>Unlimited projects</li>
<li>Glass UI kit</li>
<li>Priority support</li>
<li>Custom domain</li>
</ul>
</article>
</div>CSS
.gls-glass-pricing-card {
--c: var(--gls-color, #3b82f6);
font-size: var(--gls-size, 16px);
position: relative;
display: grid;
place-items: center;
width: 22em;
height: 12em;
border-radius: 1.25em;
overflow: hidden;
isolation: isolate;
background: linear-gradient(145deg, color-mix(in srgb, var(--c) 45%, #0f172a), color-mix(in srgb, var(--c) 25%, #134e4a));
color: #fff;
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
line-height: 1.3;
}
.gls-glass-pricing-card-orb {
position: absolute;
z-index: -1;
border-radius: 50%;
}
.gls-glass-pricing-card-orb-a {
left: 1.8em;
bottom: 0.2em;
width: 6.5em;
height: 6.5em;
background: linear-gradient(135deg, #5eead4, var(--c));
animation: gls-glass-pricing-card-orb 7s ease-in-out infinite alternate;
}
.gls-glass-pricing-card-orb-b {
right: 2em;
top: 0.2em;
width: 5.5em;
height: 5.5em;
background: linear-gradient(135deg, #fef08a, #f472b6);
animation: gls-glass-pricing-card-orb 8s ease-in-out -3s infinite alternate-reverse;
}
.gls-glass-pricing-card-card {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: 1em;
width: 19em;
padding: 0.95em 1.1em;
border-radius: 1.2em;
background: color-mix(in srgb, #fff 16%, transparent);
-webkit-backdrop-filter: blur(0.9em) saturate(1.5);
backdrop-filter: blur(0.9em) saturate(1.5);
border: 1px solid color-mix(in srgb, #fff 45%, transparent);
box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.gls-glass-pricing-card-card:hover { transform: translateY(-0.3em); }
.gls-glass-pricing-card-card::before {
content: "";
position: absolute;
inset: -50% auto -50% 0;
width: 3em;
background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.35), transparent);
transform: translateX(-4em) rotate(20deg);
animation: gls-glass-pricing-card-sweep 4.5s cubic-bezier(0.45, 0, 0.25, 1) infinite;
pointer-events: none;
}
.gls-glass-pricing-card-plan {
display: grid;
justify-items: start;
flex: none;
width: 6.6em;
}
.gls-glass-pricing-card-badge {
padding: 0.3em 0.65em;
border-radius: 99em;
background: rgb(255 255 255 / 0.9);
color: color-mix(in srgb, var(--c) 70%, #0f172a);
font-size: 0.52em;
font-weight: 750;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.gls-glass-pricing-card-name { margin: 0.45em 0 0; font-size: 0.8em; font-weight: 600; opacity: 0.85; }
.gls-glass-pricing-card-price {
margin: 0 0 0.35em;
font-size: 2.1em;
font-weight: 750;
letter-spacing: -0.03em;
line-height: 1.1;
}
.gls-glass-pricing-card-price span { font-size: 0.35em; font-weight: 550; letter-spacing: 0; opacity: 0.75; }
.gls-glass-pricing-card-cta {
justify-self: stretch;
padding: 0.6em 0;
border-radius: 0.6em;
background: #fff;
color: color-mix(in srgb, var(--c) 70%, #0f172a);
font-size: 0.68em;
font-weight: 700;
text-align: center;
text-decoration: none;
transition: transform 0.25s ease;
}
.gls-glass-pricing-card-cta:hover { transform: scale(1.04); }
.gls-glass-pricing-card-cta:focus-visible { outline: 2px solid #fff; outline-offset: 0.15em; }
.gls-glass-pricing-card-features {
display: grid;
gap: 0.55em;
margin: 0;
padding: 0 0 0 1em;
border-left: 1px solid rgb(255 255 255 / 0.3);
list-style: none;
font-size: 0.7em;
}
.gls-glass-pricing-card-features li {
display: flex;
align-items: center;
gap: 0.5em;
}
.gls-glass-pricing-card-features li::before {
content: "";
flex: none;
width: 1.1em;
height: 1.1em;
border-radius: 50%;
background: rgb(255 255 255 / 0.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat;
}
@keyframes gls-glass-pricing-card-sweep {
0% { transform: translateX(-4em) rotate(20deg); }
45%, 100% { transform: translateX(23em) rotate(20deg); }
}
@keyframes gls-glass-pricing-card-orb {
to { transform: translate(2em, -1em) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
.gls-glass-pricing-card, .gls-glass-pricing-card *, .gls-glass-pricing-card::before, .gls-glass-pricing-card::after, .gls-glass-pricing-card *::before, .gls-glass-pricing-card *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--gls-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--gls-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.