21 CSS Liquid Glass Cards
10 / 21

All 21 in 21 CSS Liquid Glass Cards

  1. 01Liquid Glass Analytics Widget
  2. 02Draggable Glass Kanban Card
  3. 03Glassmorphic Product Feature Card
  4. 04Interactive Glass Pricing Matrix
  5. 05Layered Glass Profile Card
  6. 06Horizontal Scroll Case-Study Cards
  7. 07Refractive Music Player Widget
  8. 08Minimalist Weather Glass Card
  9. 09Secure Glass Login Form Card
  10. 10Glass Payment Checkout Card
  11. 11Glass NFT Collectible Card
  12. 12Crypto Wallet Balance Widget
  13. 13Game Inventory Slot Cards
  14. 14Analytics Chart Card
  15. 15Digital Coupon / Discount Card
  16. 16Hover-Reactive Profile Bio Card
  17. 17Team Member Spotlight Card
  18. 18Media Slider & Knob Card
  19. 19Smart Home Thermostat Card
  20. 20Multi-Step Wizard Progress Card
  21. 21RPG Game Inventory Card
Pure CSSMIT licensed

Glass Payment Checkout Card

A digital credit card that looks physically cut from Liquid Glass — a translucent frosted slab that catches and reflects the gradient behind it, with a moving specular streak sweeping across its face like light on real glass. The card number, holder and chip sit on the tinted surface with full contrast.

Live Demo
Try it

Build interactive UI like this from scratch: 20 HTML, CSS & JavaScript projects

ZTM · JavaScript Web Projects · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code
Check ZTM Course

The code

<section class="lg-10" aria-label="Glass payment checkout card demo">
  <article class="lg-10__card" aria-label="Glass credit card ending 4921">
    <div class="lg-10__row1"><span class="lg-10__chip" aria-hidden="true"></span><span class="lg-10__net" aria-hidden="true">))) </span></div>
    <p class="lg-10__num">4921 •••• •••• 7043</p>
    <div class="lg-10__row2"><div><span class="lg-10__cap">Card holder</span><span class="lg-10__val">A. RIVERA</span></div><div><span class="lg-10__cap">Expires</span><span class="lg-10__val">08/29</span></div></div>
  </article>
</section>
.lg-10,
.lg-10 * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.lg-10 {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100vh;
  padding: 24px;
  perspective: 1000px;
  font-family: 'Segoe UI',system-ui,sans-serif;
  background: conic-gradient(from 40deg at 60% 30%,#0891b2,#6d28d9,#db2777,#f59e0b,#0891b2);
  background-size: 210% 210%;
  animation: lg-10-bg 18s ease-in-out infinite;
}

@keyframes lg-10-bg {
  50% {
    background-position: 100% 100%;
  }
}

.lg-10__card {
  position: relative;
  width: min(320px,100%);
  aspect-ratio: 1.6/1;
  padding: 24px;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: color-mix(in oklab,white 14%,transparent);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6),inset 0 -20px 40px rgba(0,0,0,.12),0 30px 60px -26px rgba(0,0,0,.7);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  transition: transform .5s ease;
  transform-style: preserve-3d;
}

.lg-10__card:hover {
  transform: rotateY(-10deg) rotateX(5deg);
}

.lg-10__card::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -30%;
  width: 60%;
  height: 220%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transform: rotate(20deg);
  animation: lg-10-sheen 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes lg-10-sheen {
  0%,
    60% {
    left: -40%;
  }

  100% {
    left: 120%;
  }
}

.lg-10__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.28),transparent 45%);
  pointer-events: none;
}

.lg-10__row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.lg-10__chip {
  width: 42px;
  height: 32px;
  border-radius: 7px;
  background: linear-gradient(135deg,#fde68a,#d4a017);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}

.lg-10__net {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -2px;
  transform: rotate(90deg);
  opacity: .85;
}

.lg-10__num {
  position: relative;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .12em;
  margin-top: auto;
  padding-top: 34px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}

.lg-10__row2 {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  position: relative;
}

.lg-10__cap {
  display: block;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}

.lg-10__val {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;
}

@media (prefers-reduced-motion: reduce) {
  .lg-10 {
    animation: none;
  }

  .lg-10__card::before {
    animation: none;
    opacity: 0;
  }

  .lg-10__card:hover {
    transform: none;
  }
}
/* No JavaScript — a frosted slab over a rich mesh gradient reflects colour through the glass, an animated ::before specular streak sweeps the face, and a hover perspective tilt shifts the reflection. */
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 Liquid Glass 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: Glass Payment Checkout Card
Source: https://codefronts.com/components/css-liquid-glass-cards/glass-payment-checkout-card/

A digital credit card that looks physically cut from Liquid Glass — a translucent frosted slab that catches and reflects the gradient behind it, with a moving specular streak sweeping across its face like light on real glass. The card number, holder and chip sit on the tinted surface with full contrast.
## HTML
```html
<section class="lg-10" aria-label="Glass payment checkout card demo">
  <article class="lg-10__card" aria-label="Glass credit card ending 4921">
    <div class="lg-10__row1"><span class="lg-10__chip" aria-hidden="true"></span><span class="lg-10__net" aria-hidden="true">))) </span></div>
    <p class="lg-10__num">4921 •••• •••• 7043</p>
    <div class="lg-10__row2"><div><span class="lg-10__cap">Card holder</span><span class="lg-10__val">A. RIVERA</span></div><div><span class="lg-10__cap">Expires</span><span class="lg-10__val">08/29</span></div></div>
  </article>
</section>
```
## CSS
```css
.lg-10,
.lg-10 * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.lg-10 {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100vh;
  padding: 24px;
  perspective: 1000px;
  font-family: 'Segoe UI',system-ui,sans-serif;
  background: conic-gradient(from 40deg at 60% 30%,#0891b2,#6d28d9,#db2777,#f59e0b,#0891b2);
  background-size: 210% 210%;
  animation: lg-10-bg 18s ease-in-out infinite;
}

@keyframes lg-10-bg {
  50% {
    background-position: 100% 100%;
  }
}

.lg-10__card {
  position: relative;
  width: min(320px,100%);
  aspect-ratio: 1.6/1;
  padding: 24px;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: color-mix(in oklab,white 14%,transparent);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6),inset 0 -20px 40px rgba(0,0,0,.12),0 30px 60px -26px rgba(0,0,0,.7);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  transition: transform .5s ease;
  transform-style: preserve-3d;
}

.lg-10__card:hover {
  transform: rotateY(-10deg) rotateX(5deg);
}

.lg-10__card::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -30%;
  width: 60%;
  height: 220%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transform: rotate(20deg);
  animation: lg-10-sheen 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes lg-10-sheen {
  0%,
    60% {
    left: -40%;
  }

  100% {
    left: 120%;
  }
}

.lg-10__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.28),transparent 45%);
  pointer-events: none;
}

.lg-10__row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.lg-10__chip {
  width: 42px;
  height: 32px;
  border-radius: 7px;
  background: linear-gradient(135deg,#fde68a,#d4a017);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}

.lg-10__net {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -2px;
  transform: rotate(90deg);
  opacity: .85;
}

.lg-10__num {
  position: relative;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .12em;
  margin-top: auto;
  padding-top: 34px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}

.lg-10__row2 {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  position: relative;
}

.lg-10__cap {
  display: block;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}

.lg-10__val {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;
}

@media (prefers-reduced-motion: reduce) {
  .lg-10 {
    animation: none;
  }

  .lg-10__card::before {
    animation: none;
    opacity: 0;
  }

  .lg-10__card:hover {
    transform: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — a frosted slab over a rich mesh gradient reflects colour through the glass, an animated ::before specular streak sweeps the face, and a hover perspective tilt shifts the reflection. */
```

How this works

The card is a frosted slab (backdrop-filter + rim) over a colourful mesh. A ::before holds an animated linear specular streak that sweeps diagonally; a ::after adds a soft top-left sheen. The chip is a tiny gradient block, the network glyph a masked shape. A gentle hover tilt (perspective) makes the reflection shift.

Semantic article; the card number is grouped for screen readers, sensitive digits masked, and the whole thing is non-interactive decoration with a real 'Pay' button beneath in your flow.

Make it yours

  • Recolour the card tint / mesh for brand palettes.
  • Speed or angle the specular streak via the keyframe.
  • Swap the network glyph and last-4 digits.

Gotchas — read before shipping

  • The reflection reads only over a rich gradient — not flat colour.
  • Mask real card digits; never show full PANs in a demo.
  • Keep the streak subtle so numbers stay legible.

Browser support

ChromeSafariFirefoxEdge
111+16.2+113+111+

Floor set by color-mix(), backdrop-filter as this demo is written. The core technique itself goes back further — Chrome 76+.

Pure CSS; the frosted slab degrades to a tinted solid card where backdrop-filter is unsupported.

Techniques used in this demo

3D transforms (perspective + preserve-3d)MDN ↗conic-gradient()MDN ↗aspect-ratioMDN ↗backdrop-filterMDN ↗radial-gradient()MDN ↗color-mix()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →