Vertical Stacked Card

admin1234
Jan 31, 2026 5
Live Preview

Live Editor

<div class="stack">

  <div class="card one active">
    <span class="tag">Analytics</span>
    <h3>User Insights</h3>
    <p>Understand behaviour with real-time metrics.</p>
  </div>

  <div class="card two middle">
    <span class="tag">Automation</span>
    <h3>Smart Workflows</h3>
    <p>Automate repetitive business tasks.</p>
  </div>

  <div class="card three back">
    <span class="tag">Security</span>
    <h3>Advanced Protection</h3>
    <p>Enterprise-grade data security.</p>
  </div>

</div>
body{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#0f172a;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}

/* wrapper */
.stack{
  position:relative;
  width:300px;
  height:300px;
}

/* base card */
.card{
  position:absolute;
  inset:0;
  border-radius:22px;
  padding:26px;
  color:#fff;
  transition:all .7s cubic-bezier(.22,1,.36,1);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}

/* different designs */
.card.one{
  background:linear-gradient(135deg,#6366f1,#4338ca);
}
.card.two{
  background:linear-gradient(135deg,#10b981,#047857);
}
.card.three{
  background:linear-gradient(135deg,#f97316,#c2410c);
}

/* states */
.active{
  transform:translateY(0) scale(1);
  z-index:3;
  opacity:1;
}
.middle{
  transform:translateY(26px) scale(.96);
  z-index:2;
  opacity:.85;
}
.back{
  transform:translateY(52px) scale(.92);
  z-index:1;
  opacity:.6;
}

/* exit animation */
.exit{
  transform:translateY(140%) scale(.9);
  opacity:0;
}

/* content */
.tag{
  display:inline-block;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(0,0,0,.35);
  font-size:12px;
  margin-bottom:14px;
}
h3{margin:0 0 8px}
p{opacity:.8;font-size:14px}
const cards = document.querySelectorAll(".card");
let i = 0;

function rotate(){
  const active = cards[i % cards.length];
  const middle = cards[(i+1) % cards.length];
  const back = cards[(i+2) % cards.length];

  active.classList.add("exit");

  setTimeout(()=>{
    active.className = "card back " + active.classList[1];
    middle.className = "card active " + middle.classList[1];
    back.className = "card middle " + back.classList[1];
  },500);

  i++;
}

setInterval(rotate, 1000);
Categories

Vertical Stacked Card

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
