Collection of free HTML and CSS stacked card code examples from Codepen, GitHub and other resources. Update of Febaruary 2022 collection. 3 new items.

Demo image: Stacking Cards

Author

  • Bramus

Links

Made with

  • HTML / CSS

About a code

Stacking Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Joann

Links

Made with

  • HTML / CSS (Sass)

About a code

Stacked Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Will Boyd

Links

Made with

  • HTML / CSS

About a code

Overlapping Sushi Cards

Animates z-index to toggle overlapping sushi lunch menu cards.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Jhey

Links

Made with

  • HTML (Pug) / CSS (Stylus)

About a code

Cards Against Developer Vol. 2

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Sarah Fossheim

Links

Made with

  • HTML / CSS

About a code

Rainbow Stacked Accordion Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Sarah Fossheim

Links

Made with

  • HTML / CSS

About a code

Stacked Rainbow Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • William Goldsworthy

Links

Made with

  • HTML / CSS

About the code

CSS-Tricks Card Carousel

HTML and CSS stacked cards.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Andreas Storm

Links

Made with

  • HTML / CSS (Stylus)

About the code

Tariff Cards

Stacked tariff cards in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css

Demo image: CSS Cards

Author

  • Jhey

Links

Made with

  • HTML (Pug) / CSS (Stylus)

About the code

CSS Cards

Pure CSS stacked cards.

Demo image: Polaroid Memories CSS Only

Author

  • Nico

Links

Made with

  • HTML
  • CSS/SCSS

About the code

Polaroid Memories CSS Only

Just some polaroid memories using css custom properties, filters and transitions.

Author

  • Kyle Brumm

Links

Made with

  • HTML / CSS (SCSS)

About a code

Stacked Cards Hover Effects

Just playing around with more CSS transitions and hover effects.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -