Home / 3D and Depth / Stacked Scroll Cards
Stacked Scroll Cards CSS Template, Free with Live Demo
Free stacked cards template for a garden planner app. Cards pin in place and stack on top of each other as you scroll, using only position sticky. Live demo. The example is Harvest Planner, a garden app.
What is stacked scroll cards?
Stacked scroll cards pin to the top of the screen one after another, each landing slightly lower than the last, so you end up with a neat pile. It is a clean way to walk through steps or features.
There is no JavaScript at all. Every card is position: sticky with a top value that grows by 28 pixels per card, set with one custom property. The browser does the stacking as you scroll.
Good for
- How it works steps
- Feature tours on landing pages
- Case studies and portfolios
- Pricing or plan comparisons
What you get in this template
- Cards that stick and stack with no JavaScript
- Offset per card set with --i
- Soft shadow on each card edge
- Four step layout with text and art
- Works on phones too
The key CSS
This is the part that makes the stacked scroll cards look work. Copy it into your own project.
.sc {
position: sticky;
top: calc(80px + var(--i) * 28px);
height: 420px;
border-radius: 28px;
margin-bottom: 60px;
box-shadow: 0 -10px 30px rgba(0, 0, 0, .08);
}How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
How do you stack cards on scroll with CSS?
Give every card position: sticky and a top value that increases for each one, like calc(80px + var(--i) * 28px). Each card sticks a little lower than the one before.
Why is my sticky card not sticking?
A parent with overflow: hidden or a fixed height breaks sticky. Keep the cards inside a normal block with enough space below them.
Can the lower cards shrink as new ones arrive?
Yes. Add a scroll driven animation or a small script that scales each card down as the next one covers it.
More 3D and Depth designs
071. 3D Tilt Cards
Postcard Club, a postcard subscription
072. Isometric
Stackyard, a fulfillment warehouse
073. Layered Shadows
Forma, a furniture maker
074. Floating Elements
Driftwood, a to-do app
075. Perspective Scroll
Fieldnote, a year in review page
076. Flip Cards
Palabra, a Spanish flashcard app
077. 3D Product Box
Kettle Lane, a tea brand
078. Spatial UI
Habitat, a spatial meeting workspace