25 CSS Glassmorphism Cards04 / 25

Pure CSSMIT licensed

CSS Glassmorphism Checkout Card Design

The money screens: a frosted order-summary card with line items, a promo field and a sheen-on-hover pay button, plus a payment-method picker built from radio cards — the :checked one gets the glass ring, check dot and lifted tint. Both lean dark, calm and trust-forward.

Published

Live Demo
Try it

The code

<div class="glz-04-group">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300..800&display=swap" rel="stylesheet">
<section class="glz-04a" aria-label="Glassmorphism order summary checkout card">
  <article class="glz-04a__card">
    <h3 class="glz-04a__title">Order summary</h3>
    <ul class="glz-04a__items">
      <li><img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80&w=240&auto=format&fit=crop" alt="" loading="lazy"><span class="glz-04a__n">Solstice Watch — 40mm<em>Qty 1</em></span><b>$289.00</b></li>
      <li><img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?q=80&w=240&auto=format&fit=crop" alt="" loading="lazy"><span class="glz-04a__n">Aria Studio ANC<em>Qty 1</em></span><b>$229.00</b></li>
    </ul>
    <form class="glz-04a__promo" onsubmit="return false"><label class="glz-04a__sr" for="glz-04a-code">Promo code</label><input id="glz-04a-code" type="text" placeholder="Promo code" autocomplete="off"><button type="submit">Apply</button></form>
    <dl class="glz-04a__totals">
      <div><dt>Subtotal</dt><dd>$518.00</dd></div>
      <div><dt>Shipping</dt><dd>Free</dd></div>
      <div><dt>Tax</dt><dd>$41.44</dd></div>
      <div class="glz-04a__grand"><dt>Total</dt><dd>$559.44</dd></div>
    </dl>
    <button type="button" class="glz-04a__pay">Pay $559.44</button>
    <p class="glz-04a__trust"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10V8a5 5 0 0 1 10 0v2m-11 0h12v9H6z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>Encrypted checkout · 256-bit TLS</p>
  </article>
</section>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300..800&display=swap" rel="stylesheet">
<section class="glz-04b" aria-label="Glassmorphism payment method picker">
  <article class="glz-04b__card">
    <header class="glz-04b__head"><h3>Payment method</h3><span>Step 2 of 3</span></header>
    <div class="glz-04b__methods">
      <label class="glz-04b__m"><input type="radio" name="glz-04b-pay" checked><span class="glz-04b__ic" aria-hidden="true">💳</span><span class="glz-04b__t">Card ending 4467<em>Visa · expires 09/29</em></span><i class="glz-04b__dot" aria-hidden="true"></i></label>
      <label class="glz-04b__m"><input type="radio" name="glz-04b-pay"><span class="glz-04b__ic" aria-hidden="true"></span><span class="glz-04b__t"> Pay<em>Instant · Face ID</em></span><i class="glz-04b__dot" aria-hidden="true"></i></label>
      <label class="glz-04b__m"><input type="radio" name="glz-04b-pay"><span class="glz-04b__ic" aria-hidden="true">🅿</span><span class="glz-04b__t">PayPal<em>b•••@studio.co</em></span><i class="glz-04b__dot" aria-hidden="true"></i></label>
    </div>
    <div class="glz-04b__foot"><span>Total due today</span><b>$559.44</b></div>
    <button type="button" class="glz-04b__cta">Continue to review →</button>
  </article>
</section>
</div>
.glz-04-group {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.glz-04-group > section {
  flex: 1 1 480px;
  min-width: min(100%,360px);
}

.glz-04a,
.glz-04a *,
.glz-04a *::before,
.glz-04a *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.glz-04a {
  --mint: oklch(0.82 0.15 165);
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 24px;
  background: #0a1118;
  font-family: 'Manrope',system-ui,sans-serif;
}

.glz-04a::before {
  content: "";
  position: absolute;
  width: 56vmin;
  height: 56vmin;
  border-radius: 50%;
  background: oklch(0.55 0.14 200);
  filter: blur(90px);
  opacity: .5;
  top: -14%;
  left: -6%;
}

.glz-04a::after {
  content: "";
  position: absolute;
  width: 44vmin;
  height: 44vmin;
  border-radius: 50%;
  background: oklch(0.6 0.17 160);
  filter: blur(90px);
  opacity: .4;
  bottom: -12%;
  right: -4%;
}

.glz-04a__card {
  position: relative;
  z-index: 1;
  width: min(380px,100%);
  padding: 28px;
  border-radius: 24px;
  color: #e8f1f2;
  background: linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.2);
}

.glz-04a__title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.glz-04a__items {
  list-style: none;
  margin-top: 18px;
  display: grid;
  gap: 14px;
}

.glz-04a__items li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}

.glz-04a__items img {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.2);
  background: #1c2836;
}

.glz-04a__n {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.glz-04a__n em {
  display: block;
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  color: rgba(232,241,242,.5);
  margin-top: 2px;
}

.glz-04a__items b {
  font-size: 13.5px;
  font-weight: 700;
}

.glz-04a__promo {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed rgba(255,255,255,.18);
}

.glz-04a__promo input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
  color: #e8f1f2;
  font: 600 13px 'Manrope',sans-serif;
  transition: border-color .2s ease,background .2s ease;
}

.glz-04a__promo input::placeholder {
  color: rgba(232,241,242,.4);
}

.glz-04a__promo input:focus-visible {
  outline: none;
  border-color: var(--mint);
  background: rgba(255,255,255,.1);
}

.glz-04a__promo button {
  padding: 11px 16px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.25);
  background: transparent;
  color: #e8f1f2;
  font: 700 12.5px 'Manrope',sans-serif;
  cursor: pointer;
  transition: background .2s ease;
}

.glz-04a__promo button:hover {
  background: rgba(255,255,255,.12);
}

.glz-04a__promo button:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

.glz-04a__totals {
  margin-top: 18px;
  display: grid;
  gap: 9px;
  font-variant-numeric: tabular-nums;
}

.glz-04a__totals div {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(232,241,242,.65);
}

.glz-04a__totals dd {
  font-weight: 600;
  color: rgba(232,241,242,.85);
}

.glz-04a__grand {
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.16);
}

.glz-04a__grand dt {
  font-weight: 800;
  color: #fff!important;
}

.glz-04a__grand dd {
  font-size: 17px;
  font-weight: 800;
  color: var(--mint)!important;
}

.glz-04a__pay {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 20px;
  padding: 15px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(120deg,oklch(0.78 0.15 165),oklch(0.72 0.14 200));
  color: #04140e;
  font: 800 15px 'Manrope',sans-serif;
  cursor: pointer;
  box-shadow: 0 16px 32px -12px oklch(0.78 0.15 165/.6);
  transition: transform .2s ease;
}

.glz-04a__pay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);
  transform: translateX(-130%);
}

.glz-04a__pay:hover {
  transform: translateY(-2px);
}

.glz-04a__pay:hover::after {
  transform: translateX(130%);
  transition: transform .7s ease;
}

.glz-04a__pay:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.glz-04a__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(232,241,242,.5);
}

.glz-04a__trust svg {
  width: 14px;
  height: 14px;
}

.glz-04a__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .glz-04a__card {
    background: rgba(16,25,34,.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  .glz-04a__pay,
    .glz-04a__pay::after {
    transition: none;
  }
}

.glz-04b,
.glz-04b *,
.glz-04b *::before,
.glz-04b *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.glz-04b {
  --mint: oklch(0.8 0.15 170);
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 24px;
  background: linear-gradient(200deg,#101726,#0b1f22 70%,#0c1420);
  font-family: 'Manrope',system-ui,sans-serif;
  position: relative;
  overflow: hidden;
}

.glz-04b::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 70% 20%,oklch(0.5 0.13 185/.5),transparent 65%),radial-gradient(50% 45% at 15% 85%,oklch(0.5 0.15 300/.4),transparent 65%);
}

.glz-04b__card {
  position: relative;
  z-index: 1;
  width: min(380px,100%);
  padding: 26px;
  border-radius: 24px;
  color: #e9f2f1;
  background: linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.2);
}

.glz-04b__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.glz-04b__head h3 {
  font-size: 17px;
  font-weight: 800;
}

.glz-04b__head span {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(233,242,241,.45);
}

.glz-04b__methods {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.glz-04b__m {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  cursor: pointer;
  transition: border-color .25s ease,background .25s ease,transform .2s ease;
}

.glz-04b__m:hover {
  transform: translateX(3px);
  background: rgba(255,255,255,.09);
}

.glz-04b__m input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.glz-04b__ic {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 17px;
  border-radius: 12px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
}

.glz-04b__t {
  flex: 1;
  font-size: 13.5px;
  font-weight: 700;
}

.glz-04b__t em {
  display: block;
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  color: rgba(233,242,241,.5);
  margin-top: 2px;
}

.glz-04b__dot {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  display: grid;
  place-items: center;
  transition: border-color .25s ease;
}

.glz-04b__dot::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mint);
  transform: scale(0);
  transition: transform .25s cubic-bezier(.3,1.6,.4,1);
}

.glz-04b__m:has(input:checked) {
  border-color: var(--mint);
  background: linear-gradient(150deg,oklch(0.8 0.15 170/.16),rgba(255,255,255,.05));
}

.glz-04b__m:has(input:checked) .glz-04b__dot {
  border-color: var(--mint);
}

.glz-04b__m:has(input:checked) .glz-04b__dot::after {
  transform: scale(1);
}

.glz-04b__m:has(input:focus-visible) {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

.glz-04b__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 13px;
  color: rgba(233,242,241,.6);
}

.glz-04b__foot b {
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.glz-04b__cta {
  width: 100%;
  margin-top: 16px;
  padding: 15px;
  border: none;
  border-radius: 14px;
  background: #fff;
  color: #0a1512;
  font: 800 14.5px 'Manrope',sans-serif;
  cursor: pointer;
  transition: transform .2s ease,box-shadow .2s ease;
}

.glz-04b__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px rgba(255,255,255,.4);
}

.glz-04b__cta:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .glz-04b__card {
    background: rgba(17,26,36,.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  .glz-04b__m,
    .glz-04b__dot,
    .glz-04b__dot::after,
    .glz-04b__cta {
    transition: none;
  }
}
/* No JavaScript — layout rhythm + tabular-nums do the work; the pay button's sheen is a translated gradient on ::after. */

/* No JavaScript — each method is a label wrapping a hidden radio; :has(input:checked) draws the mint ring and springs the dot in. Arrow keys switch methods natively. */
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Glassmorphism Card from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: CSS Glassmorphism Checkout Card Design
Source: https://codefronts.com/components/css-glassmorphism-cards/css-glassmorphism-checkout-card-design/

The money screens: a frosted order-summary card with line items, a promo field and a sheen-on-hover pay button, plus a payment-method picker built from radio cards — the :checked one gets the glass ring, check dot and lifted tint. Both lean dark, calm and trust-forward.
## HTML
```html
<div class="glz-04-group">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300..800&display=swap" rel="stylesheet">
<section class="glz-04a" aria-label="Glassmorphism order summary checkout card">
  <article class="glz-04a__card">
    <h3 class="glz-04a__title">Order summary</h3>
    <ul class="glz-04a__items">
      <li><img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80&w=240&auto=format&fit=crop" alt="" loading="lazy"><span class="glz-04a__n">Solstice Watch — 40mm<em>Qty 1</em></span><b>$289.00</b></li>
      <li><img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?q=80&w=240&auto=format&fit=crop" alt="" loading="lazy"><span class="glz-04a__n">Aria Studio ANC<em>Qty 1</em></span><b>$229.00</b></li>
    </ul>
    <form class="glz-04a__promo" onsubmit="return false"><label class="glz-04a__sr" for="glz-04a-code">Promo code</label><input id="glz-04a-code" type="text" placeholder="Promo code" autocomplete="off"><button type="submit">Apply</button></form>
    <dl class="glz-04a__totals">
      <div><dt>Subtotal</dt><dd>$518.00</dd></div>
      <div><dt>Shipping</dt><dd>Free</dd></div>
      <div><dt>Tax</dt><dd>$41.44</dd></div>
      <div class="glz-04a__grand"><dt>Total</dt><dd>$559.44</dd></div>
    </dl>
    <button type="button" class="glz-04a__pay">Pay $559.44</button>
    <p class="glz-04a__trust"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10V8a5 5 0 0 1 10 0v2m-11 0h12v9H6z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>Encrypted checkout · 256-bit TLS</p>
  </article>
</section>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300..800&display=swap" rel="stylesheet">
<section class="glz-04b" aria-label="Glassmorphism payment method picker">
  <article class="glz-04b__card">
    <header class="glz-04b__head"><h3>Payment method</h3><span>Step 2 of 3</span></header>
    <div class="glz-04b__methods">
      <label class="glz-04b__m"><input type="radio" name="glz-04b-pay" checked><span class="glz-04b__ic" aria-hidden="true">💳</span><span class="glz-04b__t">Card ending 4467<em>Visa · expires 09/29</em></span><i class="glz-04b__dot" aria-hidden="true"></i></label>
      <label class="glz-04b__m"><input type="radio" name="glz-04b-pay"><span class="glz-04b__ic" aria-hidden="true"></span><span class="glz-04b__t"> Pay<em>Instant · Face ID</em></span><i class="glz-04b__dot" aria-hidden="true"></i></label>
      <label class="glz-04b__m"><input type="radio" name="glz-04b-pay"><span class="glz-04b__ic" aria-hidden="true">🅿</span><span class="glz-04b__t">PayPal<em>b•••@studio.co</em></span><i class="glz-04b__dot" aria-hidden="true"></i></label>
    </div>
    <div class="glz-04b__foot"><span>Total due today</span><b>$559.44</b></div>
    <button type="button" class="glz-04b__cta">Continue to review →</button>
  </article>
</section>
</div>
```
## CSS
```css
.glz-04-group {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.glz-04-group > section {
  flex: 1 1 480px;
  min-width: min(100%,360px);
}

.glz-04a,
.glz-04a *,
.glz-04a *::before,
.glz-04a *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.glz-04a {
  --mint: oklch(0.82 0.15 165);
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 24px;
  background: #0a1118;
  font-family: 'Manrope',system-ui,sans-serif;
}

.glz-04a::before {
  content: "";
  position: absolute;
  width: 56vmin;
  height: 56vmin;
  border-radius: 50%;
  background: oklch(0.55 0.14 200);
  filter: blur(90px);
  opacity: .5;
  top: -14%;
  left: -6%;
}

.glz-04a::after {
  content: "";
  position: absolute;
  width: 44vmin;
  height: 44vmin;
  border-radius: 50%;
  background: oklch(0.6 0.17 160);
  filter: blur(90px);
  opacity: .4;
  bottom: -12%;
  right: -4%;
}

.glz-04a__card {
  position: relative;
  z-index: 1;
  width: min(380px,100%);
  padding: 28px;
  border-radius: 24px;
  color: #e8f1f2;
  background: linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.2);
}

.glz-04a__title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.glz-04a__items {
  list-style: none;
  margin-top: 18px;
  display: grid;
  gap: 14px;
}

.glz-04a__items li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}

.glz-04a__items img {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.2);
  background: #1c2836;
}

.glz-04a__n {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.glz-04a__n em {
  display: block;
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  color: rgba(232,241,242,.5);
  margin-top: 2px;
}

.glz-04a__items b {
  font-size: 13.5px;
  font-weight: 700;
}

.glz-04a__promo {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed rgba(255,255,255,.18);
}

.glz-04a__promo input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
  color: #e8f1f2;
  font: 600 13px 'Manrope',sans-serif;
  transition: border-color .2s ease,background .2s ease;
}

.glz-04a__promo input::placeholder {
  color: rgba(232,241,242,.4);
}

.glz-04a__promo input:focus-visible {
  outline: none;
  border-color: var(--mint);
  background: rgba(255,255,255,.1);
}

.glz-04a__promo button {
  padding: 11px 16px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.25);
  background: transparent;
  color: #e8f1f2;
  font: 700 12.5px 'Manrope',sans-serif;
  cursor: pointer;
  transition: background .2s ease;
}

.glz-04a__promo button:hover {
  background: rgba(255,255,255,.12);
}

.glz-04a__promo button:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

.glz-04a__totals {
  margin-top: 18px;
  display: grid;
  gap: 9px;
  font-variant-numeric: tabular-nums;
}

.glz-04a__totals div {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(232,241,242,.65);
}

.glz-04a__totals dd {
  font-weight: 600;
  color: rgba(232,241,242,.85);
}

.glz-04a__grand {
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.16);
}

.glz-04a__grand dt {
  font-weight: 800;
  color: #fff!important;
}

.glz-04a__grand dd {
  font-size: 17px;
  font-weight: 800;
  color: var(--mint)!important;
}

.glz-04a__pay {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 20px;
  padding: 15px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(120deg,oklch(0.78 0.15 165),oklch(0.72 0.14 200));
  color: #04140e;
  font: 800 15px 'Manrope',sans-serif;
  cursor: pointer;
  box-shadow: 0 16px 32px -12px oklch(0.78 0.15 165/.6);
  transition: transform .2s ease;
}

.glz-04a__pay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);
  transform: translateX(-130%);
}

.glz-04a__pay:hover {
  transform: translateY(-2px);
}

.glz-04a__pay:hover::after {
  transform: translateX(130%);
  transition: transform .7s ease;
}

.glz-04a__pay:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.glz-04a__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(232,241,242,.5);
}

.glz-04a__trust svg {
  width: 14px;
  height: 14px;
}

.glz-04a__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .glz-04a__card {
    background: rgba(16,25,34,.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  .glz-04a__pay,
    .glz-04a__pay::after {
    transition: none;
  }
}

.glz-04b,
.glz-04b *,
.glz-04b *::before,
.glz-04b *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.glz-04b {
  --mint: oklch(0.8 0.15 170);
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 24px;
  background: linear-gradient(200deg,#101726,#0b1f22 70%,#0c1420);
  font-family: 'Manrope',system-ui,sans-serif;
  position: relative;
  overflow: hidden;
}

.glz-04b::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 70% 20%,oklch(0.5 0.13 185/.5),transparent 65%),radial-gradient(50% 45% at 15% 85%,oklch(0.5 0.15 300/.4),transparent 65%);
}

.glz-04b__card {
  position: relative;
  z-index: 1;
  width: min(380px,100%);
  padding: 26px;
  border-radius: 24px;
  color: #e9f2f1;
  background: linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.2);
}

.glz-04b__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.glz-04b__head h3 {
  font-size: 17px;
  font-weight: 800;
}

.glz-04b__head span {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(233,242,241,.45);
}

.glz-04b__methods {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.glz-04b__m {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  cursor: pointer;
  transition: border-color .25s ease,background .25s ease,transform .2s ease;
}

.glz-04b__m:hover {
  transform: translateX(3px);
  background: rgba(255,255,255,.09);
}

.glz-04b__m input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.glz-04b__ic {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 17px;
  border-radius: 12px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
}

.glz-04b__t {
  flex: 1;
  font-size: 13.5px;
  font-weight: 700;
}

.glz-04b__t em {
  display: block;
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  color: rgba(233,242,241,.5);
  margin-top: 2px;
}

.glz-04b__dot {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  display: grid;
  place-items: center;
  transition: border-color .25s ease;
}

.glz-04b__dot::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mint);
  transform: scale(0);
  transition: transform .25s cubic-bezier(.3,1.6,.4,1);
}

.glz-04b__m:has(input:checked) {
  border-color: var(--mint);
  background: linear-gradient(150deg,oklch(0.8 0.15 170/.16),rgba(255,255,255,.05));
}

.glz-04b__m:has(input:checked) .glz-04b__dot {
  border-color: var(--mint);
}

.glz-04b__m:has(input:checked) .glz-04b__dot::after {
  transform: scale(1);
}

.glz-04b__m:has(input:focus-visible) {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

.glz-04b__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 13px;
  color: rgba(233,242,241,.6);
}

.glz-04b__foot b {
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.glz-04b__cta {
  width: 100%;
  margin-top: 16px;
  padding: 15px;
  border: none;
  border-radius: 14px;
  background: #fff;
  color: #0a1512;
  font: 800 14.5px 'Manrope',sans-serif;
  cursor: pointer;
  transition: transform .2s ease,box-shadow .2s ease;
}

.glz-04b__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px rgba(255,255,255,.4);
}

.glz-04b__cta:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .glz-04b__card {
    background: rgba(17,26,36,.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  .glz-04b__m,
    .glz-04b__dot,
    .glz-04b__dot::after,
    .glz-04b__cta {
    transition: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — layout rhythm + tabular-nums do the work; the pay button's sheen is a translated gradient on ::after. */

/* No JavaScript — each method is a label wrapping a hidden radio; :has(input:checked) draws the mint ring and springs the dot in. Arrow keys switch methods natively. */
```

How this works

The summary is a simple flex column; what makes it feel “engineered” is rhythm — one divider style, one row template, tabular numerals so prices align. The pay button carries its own mini light-sweep. The picker turns each payment method into a <label> wrapping a visually-hidden radio, so the whole card is clickable and arrow-key navigable for free:

.method input{position:absolute;opacity:0}
.method:has(input:checked){border-color:oklch(0.78 0.14 165);
  background:linear-gradient(150deg,rgba(94,234,183,.16),rgba(255,255,255,.05))}
.method:has(input:focus-visible){outline:2px solid #fff}

font-variant-numeric: tabular-nums keeps totals from wobbling when quantities change, and the “encrypted” footer row is text + an inline SVG lock — trust chrome that costs 40 bytes.

Make it yours

  • Line items are plain list rows — bind them to your cart loop; the ellipsis style handles long names.
  • Swap the mint accent (--mint) for your brand green/blue; it drives ring, dot, totals and button.
  • Add Klarna/Afterpay as a fourth method card — the grid wraps automatically.
  • Drop the promo row if your flow hides it; the divider rhythm holds.

Gotchas — read before shipping

  • Never make the radio input display:none — it kills keyboard access; hide it with opacity:0 while keeping it in-flow.
  • Tabular numerals need font support (most geometric sans do) — check your webfont or totals will jitter.
  • Glass over glass (picker cards inside a glass panel) needs decreasing blur radii or edges turn to mush.

Browser support

ChromeSafariFirefoxEdge
111+15.4+121+111+

Floor set by :has(), oklch(), backdrop-filter as this demo is written. The core technique itself goes back further — Chrome 105+.

:has() drives the selected-card styling; without it cards still work as radios, just without the ring. backdrop-filter per usual.

Techniques used in this demo

loading="lazy"MDN ↗filterMDN ↗backdrop-filterMDN ↗clip-pathMDN ↗place-items / place-contentMDN ↗oklch()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →