35+ CSS Stacked Cards

A curated collection of free 35+ HTML and CSS stacked card code snippets for web designers, developers, and UI/UX creatives. Each item is free and carefully hand-picked from GitHub and CodePen.

1. GSAP for HTML5: A Card Stacking Demo

See the Pen <a href="https://codepen.io/dotComb/pen/RwYqVe"> GSAP for HTML5: A Card Stacking Demo</a> by Daniel Kemper (<a href="https://codepen.io/dotComb">@dotComb</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Daniel Kemper
Source: Code / Demo
Created on: SEPTEMBER 8, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

2. Stacked Cards

See the Pen <a href="https://codepen.io/prasannapegu/pen/JdyrZP"> Stacked Cards</a> by Prasanna Pegu (<a href="https://codepen.io/prasannapegu">@prasannapegu</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Prasanna Pegu
Source: Code / Demo
Created on: JUNE 16, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less), JavaScript

3. Swipable Stacked Cards – Planning Vacations

See the Pen <a href="https://codepen.io/bmarcelino/pen/pLzYjE"> Swipable Stacked Cards – Planning Vacations</a> by Bruno Marcelino (<a href="https://codepen.io/bmarcelino">@bmarcelino</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Bruno Marcelino
Source: Code / Demo
Created on: MARCH 8, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

4. Switching stacked cards

See the Pen <a href="https://codepen.io/Dreamdealer/pen/nByYgq"> Switching stacked cards</a> by Johan van Tongeren (<a href="https://codepen.io/Dreamdealer">@Dreamdealer</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Johan van Tongeren
Source: Code / Demo
Created on: OCTOBER 31, 2012
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

5. Stacked Cards

See the Pen <a href="https://codepen.io/Vestride/pen/yLNdqz"> Stacked cards</a> by Glen Cheney (<a href="https://codepen.io/Vestride">@Vestride</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Glen Cheney
Source: Code / Demo
Created on: March 25, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: TML(Pug), CSS(SCSS), Javascript

6. Mouse Hover Card Stack

See the Pen <a href="https://codepen.io/ericmahoney/pen/qBNggbd"> Mouse Hover Card Stack</a> by Eric Mahoney (<a href="https://codepen.io/ericmahoney">@ericmahoney</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Eric Mahoney
Source: Code / Demo
Created on: November 15, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

7. Overlapping Sushi Cards

See the Pen <a href="https://codepen.io/lonekorean/pen/QWyjaeg"> Overlapping Sushi Cards</a> by Will Boyd (<a href="https://codepen.io/lonekorean">@lonekorean</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Will Boyd
Source: Code / Demo
Created on: June 09, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

8. Comment Stacked Card Animation

See the Pen <a href="https://codepen.io/shshaw/pen/KzYXvP"> Comment Card Animation</a> by Shaw (<a href="https://codepen.io/shshaw">@shshaw</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Shaw @shshaw
Source: Code / Demo
Created on: May 14, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less), JavaScript

9. Card flip

See the Pen <a href="https://codepen.io/petebot/pen/DjbYXy"> Card flip</a> by Pete Nawara (<a href="https://codepen.io/petebot">@petebot</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Pete Nawara
Source: Code / Demo
Created on: January 22, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SASS)

10. 8 skills Google looks for in its managers

See the Pen <a href="https://codepen.io/JustinChill/pen/RrOadZ"> 8 skills Google looks for in its managers</a> by Justin Hill (<a href="https://codepen.io/JustinChill">@JustinChill</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Justin Hill
Source: Code / Demo
Created on: February 17, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less), JavaScript

11. Stacked Cards

See the Pen <a href="https://codepen.io/adebiyal/pen/YMMjdY"> Stacked Cards</a> by adebiyi adedotun (<a href="https://codepen.io/adebiyal">@adebiyal</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: adebiyi adedotun
Source: Code / Demo
Created on: April 30, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

12. Card Stack

See the Pen <a href="https://codepen.io/Lane/pen/nxqgQW"> Card Stack</a> by Lane Olson (<a href="https://codepen.io/Lane">@Lane</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Lane Olson
Source: Code / Demo
Created on: May 31, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less), JavaScript

13. Rainbow Stacked Accordion Animation

See the Pen <a href="https://codepen.io/fossheim/pen/MWwOBwx"> Rainbow stacked accordion animation</a> by Sarah Fossheim (<a href="https://codepen.io/fossheim">@fossheim</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sarah Fossheim
Source: Code / Demo
Created on: March 8, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

14. The Scattering Cards

See the Pen <a href="https://codepen.io/somethingkindawierd/pen/mdeGQR"> The Scattering</a> by Jon Beebe (<a href="https://codepen.io/somethingkindawierd">@somethingkindawierd</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jon Beebe
Source: Code / Demo
Created on: March 31, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS), JavaScript

15. Flash Cards

See the Pen <a href="https://codepen.io/jkantner/pen/gPLGRv"> Flash Cards</a> by Jon Kantner (<a href="https://codepen.io/jkantner">@jkantner</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jon Kantner @jkantner
Source: Code / Demo
Created on: December 30, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SASS), JavaScript

16. Pure CSS – Sticky-Stacked Cards

See the Pen <a href="https://codepen.io/enbee81/pen/MWKxrvP"> Pure CSS – Sticky-Stacked Cards</a> by Nils Binder (<a href="https://codepen.io/enbee81">@enbee81</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nils Binder @enbee81
Source: Code / Demo
Created on: July 24, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

17. Stacking Cards

See the Pen <a href="https://codepen.io/bramus/pen/PobmGme"> 🌟 Stacking Cards, Final Version</a> by Bramus (<a href="https://codepen.io/bramus">@bramus</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Bramus @bramus
Source: Code / Demo
Created on: February 17, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

18. Hearthstone Style Card Hover

See the Pen <a href="https://codepen.io/jackrugile/pen/WZGeGM"> Hearthstone Style Card Hover</a> by Jack Rugile (<a href="https://codepen.io/jackrugile">@jackrugile</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jack Rugile
Source: Code / Demo
Created on: September 22, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

19. Stacked Cards: Horizontal

See the Pen <a href="https://codepen.io/robinrendle/pen/JjXddMM"> Stacked Cards: Horizontal</a> by Robin Rendle (<a href="https://codepen.io/robinrendle">@robinrendle</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Robin Rendle
Source: Code / Demo
Created on: August 09, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

20. Cards Against Developer

See the Pen <a href="https://codepen.io/jh3y/pen/gOaPmNj"> Cards Against Developer vol. 2 😈😅</a> by Jhey (<a href="https://codepen.io/jh3y">@jh3y</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jhey
Source: Code / Demo
Created on: April 15, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Stylus)

21. Tinder Swipe Cards

See the Pen <a href="https://codepen.io/RobVermeer/pen/japZpY"> Tinder swipe cards</a> by Rob Vermeer (<a href="https://codepen.io/RobVermeer">@RobVermeer</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Rob Vermeer
Source: Code / Demo
Created on: November 26, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

22. CSS Stack Card Slider

See the Pen <a href="https://codepen.io/Bilal1909/pen/JjXEBZo"> CSS Stack Card Slider With jQuery And CSS3</a> by Bilal.Rizwaan (<a href="https://codepen.io/Bilal1909">@Bilal1909</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Bilal.Rizwaan
Source: Code / Demo
Created on: August 24, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

23. Stacked Cards

See the Pen <a href="https://codepen.io/arron21/pen/bJqxpy"> Stacked Cards</a> by Arron (<a href="https://codepen.io/arron21">@arron21</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Arron
Source: Code / Demo
Created on: April 10, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JavaScript

24. Animated Card Stacks

See the Pen <a href="https://codepen.io/chrishutchinson/pen/qBrBjG"> Animated Card Stacks</a> by Chris Hutchinson (<a href="https://codepen.io/chrishutchinson">@chrishutchinson</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chris Hutchinson
Source: Code / Demo
Created on: May 24, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JavaScript

25. Stacked Rainbow Cards

See the Pen <a href="https://codepen.io/fossheim/pen/LYVOBRZ"> Stacked rainbow cards</a> by Sarah Fossheim (<a href="https://codepen.io/fossheim">@fossheim</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sarah Fossheim
Source: Code / Demo
Created on: March 8, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

26. Cards Against Developers

See the Pen <a href="https://codepen.io/jh3y/pen/JZbKpp"> Cards Against Developers(Tap to choose!) 😈😅 #CodePenChallenge </a> by Jhey (<a href="https://codepen.io/jh3y">@jh3y</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jhey
Source: Code / Demo
Created on: April 15, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Stylus)

27. Movable Stacked Card Row in CSS

See the Pen <a href="https://codepen.io/Firsov36/pen/PoqBYrL"> Movable Stacked Card Row in CSS</a> by Sergey (<a href="https://codepen.io/Firsov36">@Firsov36</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sergey
Source: Code / Demo
Created on: March 19, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

28. Tricks Card Carousel

See the Pen <a href="https://codepen.io/william-goldsworthy/pen/JzVajj"> CSS-Tricks Card Carousel</a> by William Goldsworthy (<a href="https://codepen.io/william-goldsworthy">@william-goldsworthy</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: William Goldsworthy
Source: Code / Demo
Created on: March 26, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

29. Stacked Cards Concept

See the Pen <a href="https://codepen.io/CiTA/pen/YzyzrMp"> Stacked cards concept</a> by Silvestar Bistrović (<a href="https://codepen.io/CiTA">@CiTA</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Silvestar Bistrović
Source: Code / Demo
Created on: April 09,2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JavaScript(Babel)

30. Stacked Card

See the Pen <a href="https://codepen.io/laijoann/pen/yLeKmVK"> stacked #fancyfeed</a> by Joann (<a href="https://codepen.io/laijoann">@laijoann</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Joann
Source: Code / Demo
Created on: July 8, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

31. Card Stack Animation

See the Pen <a href="https://codepen.io/brandondward/pen/qmWKLz"> Card stack tutorial animation</a> by Brandon Ward (<a href="https://codepen.io/brandondward">@brandondward</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Brandon Ward
Source: Code / Demo
Created on: April 12, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScrpit

32. Tariff Cards

See the Pen <a href="https://codepen.io/gzuzkstro/pen/NBWZPP"> Tariff Cards</a> by Jesús Castro (<a href="https://codepen.io/gzuzkstro">@gzuzkstro</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jesús Castro
Source: Code / Demo
Created on: July 11, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

33. Stacked Cards Smooth Show on Hover

See the Pen <a href="https://codepen.io/z-/pen/eYPLWWL"> Stacked Cards Smooth Show on Hover</a> by Zed Dash (<a href="https://codepen.io/z-">@z-</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Zed Dash @z-
Source: Code / Demo
Created on: May 16, 2023
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS( Stylus)

34. Stacking Cards

See the Pen <a href="https://codepen.io/ainalem/pen/wvoxPwK"> Stacking Cards</a> by Mikael Ainalem (<a href="https://codepen.io/ainalem">@ainalem</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mikael Ainalem
Source: Code / Demo
Created on: March 05, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

35. Stacked Cards Hover Effects

See the Pen <a href="https://codepen.io/kjbrum/pen/GWdeJX"> Stacked Cards Hover Effects</a> by Kyle Brumm (<a href="https://codepen.io/kjbrum">@kjbrum</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kyle Brumm
Source: Code / Demo
Created on: March 23, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

36. Stacked Cards

See the Pen <a href="https://codepen.io/MaartenP/pen/eMgLao"> Stacked cards</a> by Maarten (<a href="https://codepen.io/MaartenP">@MaartenP</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Maarten
Source: Code / Demo
Created on: March 20, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript