47+ CSS Flip Cards

Checkout our top and free 47+ CSS flip card code examples, improve user engagement and user interactivity of your web projects.

1. Animated Card Flip

See the Pen <a href="https://codepen.io/anatravas/pen/qqbBeJ"> Animated Card Flip</a> by Ana Travas (<a href="https://codepen.io/anatravas">@anatravas</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ana Travas
Source: Code / Demo
Created on: FEBRUARY 28, 2028
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Less), JavaScript

2. 3D Card flip iOS-style

See the Pen <a href="https://codepen.io/chrisgannon/pen/kMbxQv"> 3D Card flip iOS-style</a> by Chris Gannon (<a href="https://codepen.io/chrisgannon">@chrisgannon</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chris Gannon
Source: Code / Demo
Created on: MAY 3, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

3. CSS Card Flip

See the Pen <a href="https://codepen.io/colebemis/pen/WNKdNj"> CSS Card Flip</a> by Cole Bemis (<a href="https://codepen.io/colebemis">@colebemis</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Cole Bemis
Source: Code / Demo
Created on: AUGUST 29, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Stylus), JavaScript

4. Card Flip

See the Pen <a href="https://codepen.io/shayhowe/pen/poNrqy"> Card Flip</a> by Shay Howe (<a href="https://codepen.io/shayhowe">@shayhowe</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Shay Howe
Source: Code / Demo
Created on: MAY 12, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

5. Card Flip Animation #Bootstrap 4

See the Pen <a href="https://codepen.io/IamManchanda/pen/zoaWdW"> Card Flip Animation #Bootstrap 4</a> by Harry Manchanda (<a href="https://codepen.io/IamManchanda">@IamManchanda</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Harry Manchanda
Source: Code / Demo
Created on: DECEMBER 8, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

6. Card Flip CSS Animation

See the Pen <a href="https://codepen.io/tjegan/pen/zrMdEO"> Card Flip CSS Animation</a> by TJ Egan (<a href="https://codepen.io/tjegan">@tjegan</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: TJ Egan
Source: Code / Demo
Created on: FEBRUARY 8, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

7. Card Flip

See the Pen <a href="https://codepen.io/hellomp/pen/ZvrmdN"> Card Flip</a> by Marcos Paulo (<a href="https://codepen.io/hellomp">@hellomp</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Marcos Paulo
Source: Code / Demo
Created on: FEBRUARY 10, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

8. Element Card – Group 11 Element

See the Pen <a href="https://codepen.io/MarioDesigns/pen/PjjRWm"> Element Card – Group 11 element</a> by Mario Duarte (<a href="https://codepen.io/MarioDesigns">@MarioDesigns</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mario Duarte
Source: Code / Demo
Created on: JUNE 22, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript(Babel)

9. CSS Grid: Makeup Palettes

See the Pen <a href="https://codepen.io/oliviale/pen/bOWqbj"> CSS Grid: Makeup Palettes</a> by Olivia Ng (<a href="https://codepen.io/oliviale">@oliviale</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Olivia Ng
Source: Code / Demo
Created on: DECEMBER 23, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

10. 3D Flip Cards Pure CSS And HTML

See the Pen <a href="https://codepen.io/ArashRasteh/pen/QmgeLL"> 3D Flip Cards Pure CSS and HTML</a> by Arash Rasteh (<a href="https://codepen.io/ArashRasteh">@ArashRasteh</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Arash Rasteh
Source: Code / Demo
Created on: MARCH 23, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

11. 3D Flip Business Card

See the Pen <a href="https://codepen.io/nazarelen/pen/MedejB"> 3D flip business card</a> by Elena Nazarova (<a href="https://codepen.io/nazarelen">@nazarelen</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Elena Nazarova
Source: Code / Demo
Created on: AUGUST 22, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

12. Flipping card effect

See the Pen <a href="https://codepen.io/JeremyWink/pen/oNvybqX"> Flipping card effect</a> by Kniw Studio (<a href="https://codepen.io/JeremyWink">@JeremyWink</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kniw Studio
Source: Code / Demo
Created on: SEPTEMBER12, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

13. Tricky CSS Hover

See the Pen <a href="https://codepen.io/pgalor/pen/WKoXqM"> Tricky CSS hover</a> by Piotr Galor (<a href="https://codepen.io/pgalor">@pgalor</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Piotr Galor
Source: Code / Demo
Created on: JULY 20, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

14. Simple flip card CSS

See the Pen <a href="https://codepen.io/Podgro/pen/JYyJqw"> Simple flip card CSS</a> by TOMAZKI (<a href="https://codepen.io/Podgro">@Podgro</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: TOMAZKI
Source: Code / Demo
Created on: OCTOBER 12, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

15. Card Flip Reflection

See the Pen <a href="https://codepen.io/alphardex/pen/ExaZgxp"> Card Flip Reflection</a> by alphardex (<a href="https://codepen.io/alphardex">@alphardex</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: alphardex
Source: Code / Demo
Created on: DECEMBER 18, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

16. CSS 3D Flip Cards

See the Pen <a href="https://codepen.io/wellingguzman/pen/RyyeVq"> CSS 3D Flip Cards</a> by Welling Guzman (<a href="https://codepen.io/wellingguzman">@wellingguzman</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Welling Guzman
Source: Code / Demo
Created on: MAY 12, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (Less)

17. Pure CSS Card Flip

See the Pen <a href="https://codepen.io/edeesims/pen/wvpYWW"> Pure CSS Card Flip</a> by Eddy Sims (<a href="https://codepen.io/edeesims">@edeesims</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Eddy Sims
Source: Code / Demo
Created on: JULY 22, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

18. Lazy Loading Fig+Figcaption & Flipping Card

See the Pen <a href="https://codepen.io/alex_paul/pen/eKyZYw"> Lazy Loading Fig+Figcaption & Flipping Card</a> by Alex Paul (<a href="https://codepen.io/alex_paul">@alex_paul</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alex Paul
Source: Code / Demo
Created on: JUNE 18, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

19. 3D Card Flip With Perspective

See the Pen <a href="https://codepen.io/pirate_barbosa/pen/OGdePw"> 3D card flip with perspective</a> by Sampath (<a href="https://codepen.io/pirate_barbosa">@pirate_barbosa</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sampath
Source: Code / Demo
Created on: APRIL 27, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

20. Card Flip Jquery

See the Pen <a href="https://codepen.io/bycreator/pen/RNQmZK"> Card Flip Jquery</a> by bycreator (<a href="https://codepen.io/bycreator">@bycreator</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: bycreator
Source: Code / Demo
Created on: FEBRUARY 17, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

21. 3D Flipping Cards

See the Pen <a href="https://codepen.io/ritabradley_dev/pen/jmGVmQ"> 3D Flipping Cards</a> by Rita Bradley (<a href="https://codepen.io/ritabradley_dev">@ritabradley_dev</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Rita Bradley
Source: Code / Demo
Created on: MAY 5, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

22. CSS Business Card

See the Pen <a href="https://codepen.io/keithpickering/pen/XJeJMv"> CSS Business Card</a> by Keith Pickering (<a href="https://codepen.io/keithpickering">@keithpickering</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Keith Pickering
Source: Code / Demo
Created on: FEBRUARY 1, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

23. Animated Card / Flip On Hover /CSS

See the Pen <a href="https://codepen.io/james_gillen/pen/NGwqML"> Animated card / flip on hover /CSS</a> by James Gillen (<a href="https://codepen.io/james_gillen">@james_gillen</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: James Gillen
Source: Code / Demo
Created on: OCTOBER 16, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

24. Simple Card Flip

See the Pen <a href="https://codepen.io/mwmwmw/pen/OVrvrj"> Simple Card Flip</a> by Matthew Willox (<a href="https://codepen.io/mwmwmw">@mwmwmw</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Matthew Willox
Source: Code / Demo
Created on: AUGUST 3, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSSSCSS), JavaScript

25. Day 14 – Near Miss

See the Pen <a href="https://codepen.io/dotEthan/pen/XBxzqb"> Day 14 – Near Miss</a> by Ethan (<a href="https://codepen.io/dotEthan">@dotEthan</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ethan
Source: Code / Demo
Created on: AUGUST 8, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

26. Fallout 76 CSS Slugger Perk Flip Card

See the Pen <a href="https://codepen.io/jonnowitts/pen/YdYjmd"> Fallout 76 CSS Slugger Perk Card</a> by Jonno Witts (<a href="https://codepen.io/jonnowitts">@jonnowitts</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jonno Witts
Source: Code / Demo
Created on: JANUARY 3, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

27. 3D Product Cards

See the Pen <a href="https://codepen.io/zremboldt/pen/ZvQjOG"> 3D Product Cards</a> by Zac (<a href="https://codepen.io/zremboldt">@zremboldt</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Zac
Source: Code / Demo
Created on: DECEMBER 18, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSSSass), JavaScript(Babel)

28. Realistic 3D Image Flip Box, Flip Card, 3d Image Hover, Kallyas WordPress Theme

See the Pen <a href="https://codepen.io/nicolamihaita/pen/zKXrOW"> Realistic 3D Image Flip Box, Flip Card, 3d Image hover, Kallyas WordPress Theme</a> by Nicola Mihaita (<a href="https://codepen.io/nicolamihaita">@nicolamihaita</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nicola Mihaita
Source: Code / Demo
Created on: OCTOBER 26, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

29. Pricing Flipping Card

See the Pen <a href="https://codepen.io/ig_design/pen/VwedgWj"> Pricing – pure css – #16</a> by Ivan Grozdic (<a href="https://codepen.io/ig_design">@ig_design</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ivan Grozdic
Source: Code / Demo
Created on: JULY 11, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

30. UI – Flip Card

See the Pen <a href="https://codepen.io/AbubakerSaeed/pen/EJrRvY"> UI – Flip Card (using :focus-within for a11y)</a> by Abubaker Saeed (<a href="https://codepen.io/AbubakerSaeed">@AbubakerSaeed</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Abubaker Saeed
Source: Code / Demo
Created on: APRIL 27, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

31. Parallax Card

See the Pen <a href="https://codepen.io/hkmDesigner/pen/zdPrVp"> Parallax Card</a> by Hakkam Abdullah (<a href="https://codepen.io/hkmDesigner">@hkmDesigner</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Hakkam Abdullah
Source: Code / Demo
Created on: AUGUST 15, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

32. Pure CSS Flip Card

See the Pen <a href="https://codepen.io/aron-tw/pen/pLJqgE"> Pure CSS Flip Card</a> by Aron (<a href="https://codepen.io/aron-tw">@aron-tw</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Aron
Source: Code / Demo
Created on: MARCH 12, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

33. Card Flip Animations – Pure CSS

See the Pen <a href="https://codepen.io/juliepark/pen/deyQGx"> Card Flip Animations – Pure CSS</a> by Julie Park (<a href="https://codepen.io/juliepark">@juliepark</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Julie Park
Source: Code / Demo
Created on: APRIL 19, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

34. Bootstrap 4 – Flip cards

See the Pen <a href="https://codepen.io/chrisbo246/pen/vgVdYW"> Bootstrap 4 – Flip cards</a> by Chrisbo246 (<a href="https://codepen.io/chrisbo246">@chrisbo246</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chrisbo246

Source: Code / Demo
Created on: FEBRUARY 9, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

35. Ampersand Flash Card | Css Knockout Text + Flip Animation

See the Pen <a href="https://codepen.io/thelittleblacksmith/pen/Opxore"> ampersand flash card | css knockout text + flip animation</a> by Eina O (<a href="https://codepen.io/thelittleblacksmith">@thelittleblacksmith</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Eina O
Source: Code / Demo
Created on: MARCH 16, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

36. Teach CSS – Card Flip

See the Pen <a href="https://codepen.io/benrobyg/pen/pZYmZJ"> Teach CSS – Card Flip</a> by Ben (<a href="https://codepen.io/benrobyg">@benrobyg</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ben
Source: Code / Demo
Created on: AUGUST 13, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JavaScript

37. Journalist Flip Card

See the Pen <a href="https://codepen.io/andersschmidt/pen/kPOJRY"> Journalist Flip Card</a> by Anders Schmidt Hansen (<a href="https://codepen.io/andersschmidt">@andersschmidt</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Anders Schmidt Hansen
Source: Code / Demo
Created on: AUGUST 15, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Slim), CSS(Less), JavaScript

38. Flipping CSS Card

See the Pen <a href="https://codepen.io/DmitryKorobov/pen/LrWxKO"> Flipping Card</a> by Dmitry Korobov (<a href="https://codepen.io/DmitryKorobov">@DmitryKorobov</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dmitry Korobov
Source: Code / Demo
Created on: JUNE 11, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Sass)

39. Interactive and Responsive Card with Space Theme

See the Pen <a href="https://codepen.io/faelplg/pen/MWwxred"> #CodePenChallenge Interactive and Responsive Card with Space Theme</a> by ha.fa (<a href="https://codepen.io/faelplg">@faelplg</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: ha.fa
Source: Code / Demo
Created on: APRIL 1, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

40. Cross-Browser Flip Card

See the Pen <a href="https://codepen.io/rhernando/pen/DzdmWm"> Cross-Browser Flip Card</a> by Rodrigo Hernando (<a href="https://codepen.io/rhernando">@rhernando</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Rodrigo Hernando
Source: Code / Demo
Created on: JULY 21, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

41. Pure CSS clickable flip cards

See the Pen <a href="https://codepen.io/kparzecki/pen/RYzZwG"> Pure CSS clickable flip cards</a> by Kacper Parzęcki (<a href="https://codepen.io/kparzecki">@kparzecki</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kacper Parzęcki
Source: Code / Demo
Created on: SEPTEMBER 25, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

42. 3D Flip Card Effect

See the Pen <a href="https://codepen.io/samerpik/pen/NWzgqx"> 3D Flip Card Effect</a> by Samet Erpik (<a href="https://codepen.io/samerpik">@samerpik</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Samet Erpik
Source: Code / Demo
Created on: AUGUST 21, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

43. Card Flip Animation

See the Pen <a href="https://codepen.io/abottega/pen/QwBVMP"> Card flip animation</a> by Adam Bottega (<a href="https://codepen.io/abottega">@abottega</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Adam Bottega
Source: Code / Demo
Created on: MARCH 5, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

44. CSS Only Card Flip

See the Pen <a href="https://codepen.io/iansvo/pen/GNbKKO"> CSS Only Card Flip</a> by Ian Svoboda (<a href="https://codepen.io/iansvo">@iansvo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ian Svoboda
Source: Code / Demo
Created on: DECEMBER 26, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

45. Flipping Card

See the Pen <a href="https://codepen.io/nikishkin/pen/mOvMva"> Flipping card</a> by Sergey Nikishkin (<a href="https://codepen.io/nikishkin">@nikishkin</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sergey Nikishkin
Source: Code / Demo
Created on: DECEMBER 19, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

46. Flippy Cards

See the Pen <a href="https://codepen.io/kayfo23/pen/KoZOzB"> flippyCards</a> by Kayleigh Foley (<a href="https://codepen.io/kayfo23">@kayfo23</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kayleigh Foley
Source: Code / Demo
Created on: MARCH 28, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

47. Parallax Flipping Cards

See the Pen <a href="https://codepen.io/nicolaspavlotsky/pen/wqGgLO"> Parallax Flipping Cards</a> by Nicolas Pavlotsky (<a href="https://codepen.io/nicolaspavlotsky">@nicolaspavlotsky</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nicolas Pavlotsky
Source: Code / Demo
Created on: JULY 31, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

48. Card Flip

See the Pen <a href="https://codepen.io/cojdev/pen/EQZVRN"> Card Flip</a> by Charles Ojukwu (<a href="https://codepen.io/cojdev">@cojdev</a>) on <a href="https://codepen.io">CodePen</a>. Author: Charles Ojukwu
Source: Code / Demo
Created on: FEBRUARY 8, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (SCSS)