CSS Sticky Stacking Cards Effect
A gorgeous, modern UI design effect where cards stack on top of each other dynamically as you scroll down the page using position: sticky.
Modern landing pages use scrolling effects to captivate users. The Stacking Cards effect takes advantage of position: sticky and simple top offsets to create a stunning layering effect.
The Magic of Sticky
.card {
position: sticky;
top: 40px; /* Each subsequent card needs a higher top value to stagger correctly */
min-height: 400px;
border-radius: 24px;
background: white;
padding: 40px;
box-shadow: 0 -10px 40px rgba(0,0,0,0.1);
}
/* Staggering the top properties */
.card:nth-child(1) { top: 40px; background: #e0f2fe; }
.card:nth-child(2) { top: 60px; background: #dcfce7; }
.card:nth-child(3) { top: 80px; background: #fef08a; }
.card:nth-child(4) { top: 100px; background: #fee2e2; }
As the user scrolls down, position: sticky pins the first card at 40px. The second card scrolls up and pins at 60px — right over top of the first card, causing a beautiful stacking mechanic natively in CSS without any JS!
Open the Live Demo and scroll down to see it.