28 CSS Stacked Card Designs 24 / 28
Spiral Tower
Cards arranged in a continuously rotating 3D helix around a central axis; hover pauses the spin.
Best forhero showcases, featured collections, or attention-grabbing displays.
The code
<div class="scd-spiral">
<div class="scd-spiral__stage">
<div class="scd-spiral__spiral">
<div class="scd-spiral__card">01</div>
<div class="scd-spiral__card">02</div>
<div class="scd-spiral__card">03</div>
<div class="scd-spiral__card">04</div>
<div class="scd-spiral__card">05</div>
</div>
</div>
</div> <div class="scd-spiral">
<div class="scd-spiral__stage">
<div class="scd-spiral__spiral">
<div class="scd-spiral__card">01</div>
<div class="scd-spiral__card">02</div>
<div class="scd-spiral__card">03</div>
<div class="scd-spiral__card">04</div>
<div class="scd-spiral__card">05</div>
</div>
</div>
</div>@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Jost:wght@400;500&display=swap');
.scd-spiral, .scd-spiral *, .scd-spiral *::before, .scd-spiral *::after { box-sizing: border-box; margin: 0; padding: 0; }
.scd-spiral {
min-height: 460px;
display: grid;
place-items: center;
background: radial-gradient(circle at 50% 50%,#1e0a2e,#080410);
font-family: 'Jost', sans-serif;
}
.scd-spiral__stage {
perspective: 1200px;
width: 240px; height: 400px;
}
.scd-spiral__spiral {
position: relative; width: 100%; height: 100%;
transform-style: preserve-3d;
animation: scd-spiral-spin 14s linear infinite;
}
@keyframes scd-spiral-spin { to { transform: rotateY(360deg); } }
.scd-spiral__stage:hover .scd-spiral__spiral { animation-play-state: paused; }
.scd-spiral__card {
position: absolute; left: 50%; top: 50%;
width: 120px; height: 160px;
margin: -80px -60px;
border-radius: 16px;
display: flex; align-items: center; justify-content: center;
color: #fff;
font-family: 'Major Mono Display', monospace;
font-size: 1.4rem;
box-shadow: 0 0 30px rgba(180,100,255,.25);
}
.scd-spiral__card:nth-child(1) { transform: rotateY(0deg) translateZ(150px) translateY(-120px); background: linear-gradient(150deg,#ee0979,#ff6a00); }
.scd-spiral__card:nth-child(2) { transform: rotateY(72deg) translateZ(150px) translateY(-60px); background: linear-gradient(150deg,#7f00ff,#e100ff); }
.scd-spiral__card:nth-child(3) { transform: rotateY(144deg) translateZ(150px) translateY(0px); background: linear-gradient(150deg,#00c6ff,#0072ff); }
.scd-spiral__card:nth-child(4) { transform: rotateY(216deg) translateZ(150px) translateY(60px); background: linear-gradient(150deg,#11998e,#38ef7d); }
.scd-spiral__card:nth-child(5) { transform: rotateY(288deg) translateZ(150px) translateY(120px); background: linear-gradient(150deg,#f7971e,#ffd200); color: #623; }
@media (prefers-reduced-motion: reduce) {
.scd-spiral__spiral {
animation: none !important;
transition: none !important;
}
} @import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Jost:wght@400;500&display=swap');
.scd-spiral, .scd-spiral *, .scd-spiral *::before, .scd-spiral *::after { box-sizing: border-box; margin: 0; padding: 0; }
.scd-spiral {
min-height: 460px;
display: grid;
place-items: center;
background: radial-gradient(circle at 50% 50%,#1e0a2e,#080410);
font-family: 'Jost', sans-serif;
}
.scd-spiral__stage {
perspective: 1200px;
width: 240px; height: 400px;
}
.scd-spiral__spiral {
position: relative; width: 100%; height: 100%;
transform-style: preserve-3d;
animation: scd-spiral-spin 14s linear infinite;
}
@keyframes scd-spiral-spin { to { transform: rotateY(360deg); } }
.scd-spiral__stage:hover .scd-spiral__spiral { animation-play-state: paused; }
.scd-spiral__card {
position: absolute; left: 50%; top: 50%;
width: 120px; height: 160px;
margin: -80px -60px;
border-radius: 16px;
display: flex; align-items: center; justify-content: center;
color: #fff;
font-family: 'Major Mono Display', monospace;
font-size: 1.4rem;
box-shadow: 0 0 30px rgba(180,100,255,.25);
}
.scd-spiral__card:nth-child(1) { transform: rotateY(0deg) translateZ(150px) translateY(-120px); background: linear-gradient(150deg,#ee0979,#ff6a00); }
.scd-spiral__card:nth-child(2) { transform: rotateY(72deg) translateZ(150px) translateY(-60px); background: linear-gradient(150deg,#7f00ff,#e100ff); }
.scd-spiral__card:nth-child(3) { transform: rotateY(144deg) translateZ(150px) translateY(0px); background: linear-gradient(150deg,#00c6ff,#0072ff); }
.scd-spiral__card:nth-child(4) { transform: rotateY(216deg) translateZ(150px) translateY(60px); background: linear-gradient(150deg,#11998e,#38ef7d); }
.scd-spiral__card:nth-child(5) { transform: rotateY(288deg) translateZ(150px) translateY(120px); background: linear-gradient(150deg,#f7971e,#ffd200); color: #623; }
@media (prefers-reduced-motion: reduce) {
.scd-spiral__spiral {
animation: none !important;
transition: none !important;
}
}More from 28 CSS Stacked Card Designs
Scratch CardsCSS Stacked Cards Hover RevealPure CSS Stacked Card Testimonial Slider3D Overlapping Stacked Cards (Isometric View)Minimalist Bento Grid Stacked CardsClassic DeckFan SpreadTilted PolaroidsStaircase BricksPerspective DeckHover SpreadCascade Lift
View the full collection →