Animate Your Website: Build a Scrolling Stack Card Effect With Pure CSS

Imagine you have a website with information cards, but you want to present them in a more engaging way than a simple list. A cool scrolling stack card effect can achieve this! By using only CSS, you can create a visually interesting layout where cards overlap and resize as you scroll, mimicking a real-life stack of cards.

Here’s a step-by-step guide to get you started:

Step1: HTML Card Stack Structure

This HTML code defines a visually engaging stack of cards within a web page, where each div element represents an individual card with unique content, all contained within a parent div labeled as stack for a grouped interactive display.

<div id="stack" class="card-stack">
<div class="card">Explore the new</div>
<div class="card">Journey begins</div>
<div class="card">Unveil the secrets</div>
<div class="card">Discover your path</div>
<div class="card">Celebrate the moments</div>
<div class="card">Unlock the potential</div>
<div class="card">Embrace the adventure</div>

Step2: Styling for Scrolling Stack Card Effect

This CSS code creates a visually dynamic and interactive card layout within a central grid on a webpage, utilizing properties like position: sticky, variable-based transformations, and conditional styling to achieve a visually engaging and responsive stack of cards that vary in rotation and position as they are interacted with.

* { margin: 0; font: inherit }
body {
background: #2980b57a !important;
text-align: center;
main {
--tilt-angle: 3deg;
position: relative;
display: grid;
grid-template-rows: 1fr max-content;
height: 100vh;
width: 30rem;
margin: auto;
font-size: 2.4rem;
top: 10vh;
.card {
position: sticky;
top: calc(var(--top) * 1px);
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
background-color: #53ccbb;
border-radius: 0.5em;
padding: 3em;
margin-bottom: 2em;
transform: rotate(calc(var(--tilt-angle) * (2 * (var(--r) - 0.5))));
transition: * 0.3s ease;
.card.stuck {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Add a box shadow effect */
background-color: red;
.card:nth-child(4n) {
--r: 0.7;
--top: 0;
.card:nth-child(4n + 1) {
--r: 0.2;
--top: 50;
.card:nth-child(4n + 2) {
--r: 0.9;
--top: 100;
.card:nth-child(4n + 3) {
--r: 0.4;
--top: 150;

Animate Your Website: Build a Scrolling Stack Card Effect With Pure CSS Demo

And that’s it! You’ve now created a visually engaging card stack with a scrolling effect using CSS. This effect can significantly enhance the user experience on your website, making it more interactive and appealing.

You Might Be Interested In:

Ashfaq Ahmed is a freelance WordPress developer and owner of I developed modern and highly interactive websites. I always focus on improving my development and design skills.

Leave a Comment