Welcome to our collection of CSS flip cards! In this curated compilation, we have gathered a selection of free HTML and CSS flip card code examples sourced from reputable platforms like CodePen, GitHub and other valuable resources.

With our November 2021 update, we are thrilled to present five new additions to our collection, ensuring that you have access to the latest and most innovative flip card designs available. These flip cards add a touch of interactivity and visual interest to your website or application, creating engaging user experiences and captivating your audience.

Flip cards have gained popularity in modern web design as they provide an elegant and dynamic way to showcase content. By utilizing CSS transitions and transforms, these flip cards allow you to seamlessly switch between front and back faces, revealing additional information or imagery upon interaction.

Our hand-picked collection features a diverse range of flip card designs, from simple and minimalistic layouts to more complex and visually stunning animations. Each example showcases the creative possibilities that CSS offers, enabling you to create unique and interactive flip card designs that align with your project's aesthetic.

Stay ahead of the curve and elevate the user experience of your website or application with these versatile CSS flip cards. Start exploring our collection now and unlock the potential to create captivating and interactive flip card designs that leave a lasting impression on your users.

Related Articles

  1. CSS Cards
  2. CSS Blog Cards
  3. CSS Card Hover Effects
  4. CSS Card Layouts
  5. CSS Material Design Cards
  6. CSS Movie Cards
  7. CSS Product Cards
  8. CSS Credit Cards
  9. CSS Profile Cards
  10. CSS Recipe Cards
  11. CSS Business Cards

Author

  • Ivan Grozdic

Made with

  • HTML / CSS

About a code

Pricing Pure CSS Cards

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

Responsive: yes

Dependencies: unicons.css

Author

  • Rafael Goulart

Made with

  • HTML / CSS (SCSS)

About a code

Interactive and Responsive Card with Space Theme

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

Responsive: yes

Dependencies: -

Author

  • alphardex

Made with

  • HTML / CSS (SCSS)

About a code

Card Flip Reflection

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

Responsive: no

Dependencies: -

Author

  • Kniw Studio

Made with

  • HTML / CSS

About a code

Flipping Card Effect

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

Responsive: no

Dependencies: -

Author

  • Abubaker Saeed

Made with

  • HTML / CSS

About a code

UI - Flip Card

Flip card (using :focus-within for a11y).

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

Responsive: no

Dependencies: -

Author

  • Jonno Witts

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Fallout 76 CSS Slugger Perk Card

A CSS only (with a bit of native JS interaction) recreation of a Fallout 76 perk card. I saw the perk cards while checking out some videos. At first I thought the notch/bump in the corner would be interesting to recreate in CSS, however as I was building it I realised that there were lots of bits that would be interesting to create in CSS. In particular the conic gradient (used for the background on the front of the card). It's not yet supported outside of Chrome (using a fall back) but it's a neat piece of CSS. Other bits used: various CSS shapes using overlaps (the stars), Google Fonts, animations, gradients with stops, and all rems for easy resizing at different device sizes.

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

Responsive: yes

Dependencies: conic-gradient.js

Demo image: CSS Flip Cards CSS Flip Cards - GIF Demo

Author

  • Kacper

Made with

  • HTML / CSS (SCSS)

About the code

CSS Flip Cards

Pure CSS clickable flip cards.

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

Dependencies: font-awesome.css

Author

  • Piotr Galor

Made with

  • HTML / CSS

About the code

Tricky CSS Hover

Experimenting in 3D, VR inspired card layout feat. skateboarding theme.

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

Responsive: yes

Dependencies: -

Demo image: Responsive Flip Card Grid Responsive Flip Card Grid - GIF Demo

Author

  • Oliver Knoblich

Made with

  • HTML / CSS / JavaScript

About the code

Responsive Flip Card Grid

Responsive flip card grid with 1:1 aspect ratio.

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

Dependencies: bootstrap.css, jquery.js

Demo image: Figcaption for Flipping Card

Author

  • Alex Paul

Made with

  • HTML / CSS / JavaScript

About the code

Figcaption for Flipping Card

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

Dependencies: font-awesome.css

Demo image: Flipping Card Flipping Card - GIF Demo

Author

  • Dmitry Korobov

Made with

  • HTML / CSS (Sass)

About the code

Flipping Card

Simple CSS flipping card.

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

Dependencies: -

Demo image: CSS 3D Flip Cards CSS 3D Flip Cards - GIF Demo

Author

  • Welling Guzman

Made with

  • HTML (Pug) / CSS (Less)

About the code

CSS 3D Flip Cards

CSS 3D diagonal flip cards.

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

Dependencies: -

Demo image: Flippy Cards Flippy Cards - GIF Demo

Author

  • Kayleigh

Made with

  • HTML / CSS (SCSS)

About the code

Flippy Cards

Simple HTML and CSS flippy cards.

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

Dependencies: -

Demo image: HTML and CSS Flip Cards HTML and CSS Flip Cards - GIF Demo

Author

  • Arash Rasteh

Made with

  • HTML / CSS (SCSS)

About the code

HTML and CSS Flip Cards

3D flip cards pure CSS and HTML.

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

Dependencies: bootstrap.css

Demo image: Pure CSS Flip Cards Pure CSS Flip Cards - GIF Demo

Author

  • Aron

Made with

  • HTML / CSS (SCSS)

About the code

Pure CSS Flip Cards

Pure CSS card with attractive horizontal and vertical flip.

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

Dependencies: -

Author

  • Charles Ojukwu

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Card Flip

3D card flip effect with a 3D button.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: 3D Product Cards

Author

  • Zac

Made with

  • HTML / CSS (Sass) / JavaScript (Babel)

About the code

3D Product Cards

A project I used to learn a little bit more about using 3D CSS properties and some practice with more performant animated shadow effects. The little things that make me happy: more performant box-shadow transitions. Box shadow is applied to :after and only the opacity is being animated.

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

Dependencies: -

Demo image: Parallax Card Parallax Card - GIF Demo

Author

  • Hakkam Abdullah

Made with

  • HTML / CSS

About the code

Parallax Card

CSS flip card with parallax effect.

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

Dependencies: -

Demo image: Parallax Flipping Cards Parallax Flipping Cards - GIF Demo

Author

  • Tyrell Rummage

Made with

  • HTML / CSS

About the code

Parallax Flipping Cards

Parallax flipping cards. The parallax delay really does it justice.

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

Dependencies: -

Demo image: Element Card Group Element Element Card Group Element - GIF Demo

Author

  • Mario Duarte

Made with

  • HTML / CSS (SCSS) / JavaScript (Babel)

About the code

Element Card Group Element

Card UI with a simple 3D interaction.

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

Dependencies: jquery.js

Demo image: 3D Flipping Cards

Author

  • Rita Bradley

Made with

  • HTML / CSS (SCSS)

About the code

3D Flipping Cards

Just a cute little card flipping demo. Not a game yet, but still nice to look. Hover over the cards to see what I mean!

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

Dependencies: bootstrap.css

Demo image: Ampersand Flash Card

Author

  • Eina O

Made with

  • HTML / CSS

About the code

Ampersand Flash Card

CSS ampersand flash card with knockout text and flip animation.

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

Dependencies: -

Demo image: Flipping Card Flipping Card - GIF Demo

Author

  • Sergey Nikishkin

Made with

  • HTML / CSS / JavaScript

About the code

Flipping Card

Flipping card with activation button.

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

Dependencies: jquery.js

Demo image: 3D Flip Card 3D Flip Card - GIF Demo

Author

  • Nicola Mihaita

Made with

  • HTML / CSS / JavaScript

About the code

3D Flip Card

Realistic 3D image flip box/card.

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

Dependencies: jquery.js