36 CSS Stacked Cards
33 / 36

All 36 in 36 CSS Stacked Cards

  1. 01Scroll-Driven Scaling Stack
  2. 02Horizontal Swiper Deck (Tinder-style)
  3. 03Glassmorphic Floating Testimonial Stack
  4. 04Stacked Expansion Accordion
  5. 05Interactive Fan-Out Photo Stack
  6. 063D Perspective Hover Tilt Stack
  7. 07Progressive Disclosure Step Stack
  8. 08Dynamic Tabbed Stack Deck
  9. 09Swipeable / Click-to-Front Stacked Cards
  10. 10Classic Deck
  11. 11Fan Spread
  12. 12Tilted Polaroids
  13. 13Staircase Bricks
  14. 14Hover Spread
  15. 15Cascade Lift
  16. 16Accordion Spread
  17. 17Shuffle Reveal
  18. 18Tab Stack
  19. 19Photos Pinch
  20. 20Swipe Stack
  21. 21Accordion Card
  22. 22Isometric Tower
  23. 233D Flip Stack
  24. 24Tilt on Hover
  25. 25Notification Pile
  26. 26Receipt Roll
  27. 27Scratch Cards
  28. 28CSS Stacked Cards Hover Reveal
  29. 29Scroll-Activated Stacked Cards (Sticky Stack)
  30. 30Pure CSS Stacked Card Testimonial Slider
  31. 313D Overlapping Stacked Cards (Isometric View)
  32. 32Minimalist Bento Grid Stacked Cards
  33. 33Perspective Deck
  34. 34Peel Back
  35. 35Timeline Stack
  36. 36Spiral Tower
Pure CSSMIT licensed

Perspective Deck

A tunnel of glassmorphic sci-fi panels receding into depth with neon edges. Hover tilts the whole stack in 3D and pushes the front card toward you. Suited to dashboards, status boards, and tech product pages.

Live Demo
Plain CSSTailwind v4
Try it

Build UI like this from scratch: Flexbox, Grid, animations & responsive CSS

ZTM · The CSS Bootcamp · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code
Check ZTM Course

The code

<div class="scd-33">
  <div class="scd-33__stage">
    <div class="scd-33__deck">
      <div class="scd-33__card"><h3>SECTOR 01</h3><p>Active node // online</p></div>
      <div class="scd-33__card"><h3>SECTOR 02</h3><p>Buffered // standby</p></div>
      <div class="scd-33__card"><h3>SECTOR 03</h3><p>Cached // idle</p></div>
      <div class="scd-33__card"><h3>SECTOR 04</h3><p>Archived // sleep</p></div>
    </div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&family=Rajdhani:wght@500&display=swap');

.scd-33,
.scd-33 *,
.scd-33 *::before,
.scd-33 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.scd-33 {
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 50%,#10131f,#05060a);
  font-family: 'Rajdhani', sans-serif;
}

.scd-33__stage {
  perspective: 900px;
  width: 300px;
  height: 380px;
}

.scd-33__deck {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .8s ease;
}

.scd-33__card {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(155deg,rgba(40,52,90,.9),rgba(18,22,40,.95));
  border: 1px solid rgba(120,170,255,.35);
  box-shadow: 0 0 40px rgba(70,120,255,.18);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px;
  color: #cfe0ff;
  backdrop-filter: blur(2px);
  transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .8s;
}

.scd-33__card h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.3rem;
  letter-spacing: .08em;
}

.scd-33__card p {
  opacity: .6;
  font-size: .95rem;
  letter-spacing: .05em;
}

.scd-33__card:nth-child(1) {
  transform: translateZ(0px);
}

.scd-33__card:nth-child(2) {
  transform: translateZ(-80px) translateY(-26px);
  opacity: .85;
}

.scd-33__card:nth-child(3) {
  transform: translateZ(-160px) translateY(-52px);
  opacity: .6;
}

.scd-33__card:nth-child(4) {
  transform: translateZ(-240px) translateY(-78px);
  opacity: .4;
}

.scd-33__stage:hover .scd-33__deck {
  transform: rotateX(18deg) rotateY(-12deg);
}

.scd-33__stage:hover .scd-33__card:nth-child(1) {
  transform: translateZ(60px);
}

@media (prefers-reduced-motion: reduce) {
  .scd-33__deck,
    .scd-33__card {
    transition: none !important;
  }
}
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 Stacked 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: Perspective Deck
Source: https://codefronts.com/components/css-stacked-cards/perspective-deck/

A tunnel of glassmorphic sci-fi panels receding into depth with neon edges. Hover tilts the whole stack in 3D and pushes the front card toward you. Suited to dashboards, status boards, and tech product pages.
## HTML
```html
<div class="scd-33">
  <div class="scd-33__stage">
    <div class="scd-33__deck">
      <div class="scd-33__card"><h3>SECTOR 01</h3><p>Active node // online</p></div>
      <div class="scd-33__card"><h3>SECTOR 02</h3><p>Buffered // standby</p></div>
      <div class="scd-33__card"><h3>SECTOR 03</h3><p>Cached // idle</p></div>
      <div class="scd-33__card"><h3>SECTOR 04</h3><p>Archived // sleep</p></div>
    </div>
  </div>
</div>
```
## CSS
```css
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&family=Rajdhani:wght@500&display=swap');

.scd-33,
.scd-33 *,
.scd-33 *::before,
.scd-33 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.scd-33 {
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 50%,#10131f,#05060a);
  font-family: 'Rajdhani', sans-serif;
}

.scd-33__stage {
  perspective: 900px;
  width: 300px;
  height: 380px;
}

.scd-33__deck {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .8s ease;
}

.scd-33__card {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(155deg,rgba(40,52,90,.9),rgba(18,22,40,.95));
  border: 1px solid rgba(120,170,255,.35);
  box-shadow: 0 0 40px rgba(70,120,255,.18);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px;
  color: #cfe0ff;
  backdrop-filter: blur(2px);
  transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .8s;
}

.scd-33__card h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.3rem;
  letter-spacing: .08em;
}

.scd-33__card p {
  opacity: .6;
  font-size: .95rem;
  letter-spacing: .05em;
}

.scd-33__card:nth-child(1) {
  transform: translateZ(0px);
}

.scd-33__card:nth-child(2) {
  transform: translateZ(-80px) translateY(-26px);
  opacity: .85;
}

.scd-33__card:nth-child(3) {
  transform: translateZ(-160px) translateY(-52px);
  opacity: .6;
}

.scd-33__card:nth-child(4) {
  transform: translateZ(-240px) translateY(-78px);
  opacity: .4;
}

.scd-33__stage:hover .scd-33__deck {
  transform: rotateX(18deg) rotateY(-12deg);
}

.scd-33__stage:hover .scd-33__card:nth-child(1) {
  transform: translateZ(60px);
}

@media (prefers-reduced-motion: reduce) {
  .scd-33__deck,
    .scd-33__card {
    transition: none !important;
  }
}
```

How this works

Three glassmorphic sci-fi panels arranged along the Z-axis in a receding tunnel. The parent has perspective:1200px. The stack sets transform-style:preserve-3d and each card gets transform:translateZ(N*-40px) translateY(N*8px) — the negative Z pushes cards INTO the screen, creating depth.

Each card is glassmorphic via backdrop-filter:blur(16px) + a low-opacity white background + a neon border via box-shadow. The neon edge shifts hue on hover to reinforce the sci-fi aesthetic.

On hover of the stack, the whole thing tilts via rotateX(15deg) and the front card slides forward via translateZ(20px) — pushing it toward the viewer while the back cards recede further.

Make it yours

  • Rebrand the neon glow from --neon on the wrapper — cyan for sci-fi, magenta for cyberpunk, amber for retro-future.
  • Adjust the Z-depth spacing between cards via the translateZ multiplier.
  • Change the glass blur intensity via the backdrop-filter blur radius.
  • Tune the hover tilt angle via the parent's rotateX value.
  • Add a subtle scanline overlay for full sci-fi authenticity via a repeating linear-gradient.

Gotchas — read before shipping

  • backdrop-filter requires an actual background behind the element — solid single-tone backgrounds produce no blur effect.
  • GPU-composited backdrop-filter is expensive on mobile — cap at 3-4 glass cards on one screen for smooth rendering.
  • Include -webkit-backdrop-filter for older Safari.
  • The perspective + Z depth reduces text contrast on the receding cards — either boost contrast on the back cards or reduce their opacity to signal they're background.
  • Under prefers-reduced-motion:reduce, skip the hover tilt and keep only the resting layout.

Browser support

ChromeSafariFirefoxEdge
76+9+103+76+

backdrop-filter is baseline in every current browser; -webkit-backdrop-filter for older Safari. CSS 3D transforms are universally supported.

Techniques used in this demo

3D transforms (perspective + preserve-3d)MDN ↗backdrop-filterMDN ↗radial-gradient()MDN ↗place-items / place-contentMDN ↗box-shadowMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →