21 CSS Liquid Glass Cards
11 / 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 NFT Collectible Card

A collectible / NFT showcase card where the artwork sits behind a Liquid Glass 'protective case' — a refractive pane with a holographic sheen that shifts colour as the card tilts, plus an animated glowing aura behind the art. The premium, futuristic treatment Web3 and gaming projects search for.

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-11" aria-label="Glass NFT collectible card demo">
  <article class="lg-11__card">
    <div class="lg-11__stage">
      <span class="lg-11__aura" aria-hidden="true"></span>
      <div class="lg-11__art" role="img" aria-label="Collectible artwork: Prism Golem #024"><span class="lg-11__ph">artwork</span></div>
      <span class="lg-11__holo" aria-hidden="true"></span>
    </div>
    <div class="lg-11__info">
      <div class="lg-11__titles"><h3>Prism Golem</h3><span class="lg-11__rare">Legendary · #024</span></div>
      <div class="lg-11__bidrow"><div><span class="lg-11__cap">Current bid</span><span class="lg-11__price">4.20 ETH</span></div><button class="lg-11__bid" type="button">Place bid</button></div>
    </div>
  </article>
</section>
.lg-11,
.lg-11 * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@property --holo {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.lg-11 {
  --a: oklch(0.72 0.2 300);
  --b: oklch(0.78 0.18 200);
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100vh;
  padding: 24px;
  perspective: 1000px;
  font-family: 'Segoe UI',system-ui,sans-serif;
  background: radial-gradient(120% 120% at 50% 0%,#1e1b4b,#0b1020 70%);
}

.lg-11__card {
  width: min(280px,100%);
  border-radius: 24px;
  padding: 14px;
  isolation: isolate;
  background: color-mix(in oklab,white 8%,transparent);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4),0 34px 70px -30px rgba(0,0,0,.85);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  transition: transform .5s ease;
  transform-style: preserve-3d;
}

.lg-11__card:hover {
  transform: rotateY(-8deg) rotateX(6deg);
}

.lg-11__stage {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1;
}

.lg-11__aura {
  position: absolute;
  inset: -30%;
  background: conic-gradient(from 0deg,var(--a),var(--b),var(--a));
  filter: blur(24px);
  animation: lg-11-spin 8s linear infinite;
  opacity: .8;
}

@keyframes lg-11-spin {
  to {
    transform: rotate(360deg);
  }
}

.lg-11__art {
  position: absolute;
  inset: 8px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(45deg,#312e81,#312e81 10px,#4338ca 10px,#4338ca 20px);
  border: 1px solid rgba(255,255,255,.3);
}

.lg-11__ph {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  color: rgba(255,255,255,.7);
}

.lg-11__holo {
  position: absolute;
  inset: 0;
  background: conic-gradient(from var(--holo),transparent,rgba(255,255,255,.4),transparent 30%,rgba(120,200,255,.4) 55%,transparent 70%);
  mix-blend-mode: screen;
  animation: lg-11-holo 6s linear infinite;
  pointer-events: none;
}

@keyframes lg-11-holo {
  to {
    --holo: 360deg;
  }
}

.lg-11__info {
  padding: 14px 6px 6px;
  color: #fff;
}

.lg-11__titles {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lg-11__titles h3 {
  font-size: 18px;
  font-weight: 800;
}

.lg-11__rare {
  font-size: 11px;
  font-weight: 700;
  color: #c7d2fe;
}

.lg-11__bidrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 14px;
}

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

.lg-11__price {
  font-size: 20px;
  font-weight: 800;
}

.lg-11__bid {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(120deg,var(--a),var(--b));
  box-shadow: 0 10px 24px -10px var(--a);
}

.lg-11__bid:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .lg-11__aura,
    .lg-11__holo {
    animation: none;
  }

  .lg-11__card:hover {
    transform: none;
  }
}
/* No JavaScript — an animated conic aura glows behind the artwork while a screen-blended conic holo sweep (@property --holo) plays over a frosted glass case, and a hover perspective tilt travels the sheen. */
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 NFT Collectible Card
Source: https://codefronts.com/components/css-liquid-glass-cards/glass-nft-collectible-card/

A collectible / NFT showcase card where the artwork sits behind a Liquid Glass 'protective case' — a refractive pane with a holographic sheen that shifts colour as the card tilts, plus an animated glowing aura behind the art. The premium, futuristic treatment Web3 and gaming projects search for.
## HTML
```html
<section class="lg-11" aria-label="Glass NFT collectible card demo">
  <article class="lg-11__card">
    <div class="lg-11__stage">
      <span class="lg-11__aura" aria-hidden="true"></span>
      <div class="lg-11__art" role="img" aria-label="Collectible artwork: Prism Golem #024"><span class="lg-11__ph">artwork</span></div>
      <span class="lg-11__holo" aria-hidden="true"></span>
    </div>
    <div class="lg-11__info">
      <div class="lg-11__titles"><h3>Prism Golem</h3><span class="lg-11__rare">Legendary · #024</span></div>
      <div class="lg-11__bidrow"><div><span class="lg-11__cap">Current bid</span><span class="lg-11__price">4.20 ETH</span></div><button class="lg-11__bid" type="button">Place bid</button></div>
    </div>
  </article>
</section>
```
## CSS
```css
.lg-11,
.lg-11 * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@property --holo {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.lg-11 {
  --a: oklch(0.72 0.2 300);
  --b: oklch(0.78 0.18 200);
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100vh;
  padding: 24px;
  perspective: 1000px;
  font-family: 'Segoe UI',system-ui,sans-serif;
  background: radial-gradient(120% 120% at 50% 0%,#1e1b4b,#0b1020 70%);
}

.lg-11__card {
  width: min(280px,100%);
  border-radius: 24px;
  padding: 14px;
  isolation: isolate;
  background: color-mix(in oklab,white 8%,transparent);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4),0 34px 70px -30px rgba(0,0,0,.85);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  transition: transform .5s ease;
  transform-style: preserve-3d;
}

.lg-11__card:hover {
  transform: rotateY(-8deg) rotateX(6deg);
}

.lg-11__stage {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1;
}

.lg-11__aura {
  position: absolute;
  inset: -30%;
  background: conic-gradient(from 0deg,var(--a),var(--b),var(--a));
  filter: blur(24px);
  animation: lg-11-spin 8s linear infinite;
  opacity: .8;
}

@keyframes lg-11-spin {
  to {
    transform: rotate(360deg);
  }
}

.lg-11__art {
  position: absolute;
  inset: 8px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(45deg,#312e81,#312e81 10px,#4338ca 10px,#4338ca 20px);
  border: 1px solid rgba(255,255,255,.3);
}

.lg-11__ph {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  color: rgba(255,255,255,.7);
}

.lg-11__holo {
  position: absolute;
  inset: 0;
  background: conic-gradient(from var(--holo),transparent,rgba(255,255,255,.4),transparent 30%,rgba(120,200,255,.4) 55%,transparent 70%);
  mix-blend-mode: screen;
  animation: lg-11-holo 6s linear infinite;
  pointer-events: none;
}

@keyframes lg-11-holo {
  to {
    --holo: 360deg;
  }
}

.lg-11__info {
  padding: 14px 6px 6px;
  color: #fff;
}

.lg-11__titles {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lg-11__titles h3 {
  font-size: 18px;
  font-weight: 800;
}

.lg-11__rare {
  font-size: 11px;
  font-weight: 700;
  color: #c7d2fe;
}

.lg-11__bidrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 14px;
}

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

.lg-11__price {
  font-size: 20px;
  font-weight: 800;
}

.lg-11__bid {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(120deg,var(--a),var(--b));
  box-shadow: 0 10px 24px -10px var(--a);
}

.lg-11__bid:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .lg-11__aura,
    .lg-11__holo {
    animation: none;
  }

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

## JavaScript
```js
/* No JavaScript — an animated conic aura glows behind the artwork while a screen-blended conic holo sweep (@property --holo) plays over a frosted glass case, and a hover perspective tilt travels the sheen. */
```

How this works

The artwork placeholder glows via an animated conic aura behind it. Over it sits a glass case: backdrop-filter pane + a holographic ::before using a shifting conic-gradient at low opacity (screen blend) that animates hue, reading as a refractive protective coating. A hover perspective tilt makes the holo sheen travel. Rarity + price sit on a solid inner chip.

Semantic article with heading, art placeholder with alt, and a real 44px 'Place bid' button with focus ring.

Make it yours

  • Recolour the aura + holo via --a/--b.
  • Speed the holo shift via the keyframe.
  • Swap the striped placeholder for the real artwork.

Gotchas — read before shipping

  • Keep the holo overlay low-opacity + screen-blended so art stays visible.
  • Rich background behind the art sells the refraction — avoid flat fills.
  • Ensure price/rarity contrast on the chip, not over the holo.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

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

Pure CSS; holo + tilt are enhancement — the card is a legible framed collectible without them.

Techniques used in this demo

mix-blend-modeMDN ↗3D transforms (perspective + preserve-3d)MDN ↗@propertyMDN ↗conic-gradient()MDN ↗aspect-ratioMDN ↗filterMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →