A collection of creative CSS cards. Create stunning designs with CSS by learning these creative CSS card collection examples. Cards are developed using HTML and CSS.
01 of 100Responsive News Card Slider
About the Code
I built another Card Slider for news and blog pages etc with swiper.js. I made sweet animations when the mouse hovers and slides change. Also, all of them are responsive. Updated on October 25, 2021
More info: Link
Dependency: swiper.min.css, jquery.min.js, swiper.min.js
02 of 100Ionic Swoosh Cards

Ionic Swoosh Cards
03 of 100Interactive profile card

Out of glass instead of paper. And it’s draggable, drag it around to check the background blur effect. Then, make sure to click on the info icon to check the card animation.
04 of 1003D hover plane effect

Simple 3D plane hover effect using CSS3 transform
05 of 1003D Fold out reveal

Click to reveal more info. Info folds out beneath the card, while the rest of the grid recedes.
Andrew Canham
NOVEMBER 04, 2015
HTML, CSS and JavaScript
06 of 100Animated CSS Cards Stacks

Testing some simple animations to separate stacks of cards
07 of 100Hearthstone Card CSS 3D Click/Drag

In honor of the release of the Whispers of the Old Gods expansion for Hearthstone, I wanted to share this proof of concept. The card drag feature in the game has always been one of my favorite things to play with. It feels like the card is reacting to air resistance as you drag it around. The audio is a little finicky, just wanted something rough for the effect.
08 of 100Flying CSS cards tabs

Cards flying away randomly
09 of 100Calendar card with 3d effects

Calendar card and added a 3d effect
10 of 100Flexbox Cards with Animation

A short proof of concept for making cards with onclick animation events.
11 of 100Animated Christmas Card

Animated Christmas card
Łukasz Niedźwiecki
DECEMBER 25, 2016
HTML, CSS and JavaScript
12 of 100Tinder swipe CSS cards

Tinder swipe cards made with hammer.js
13 of 100Web Material Card Concept

material design card ui
14 of 100Material VCard

Another example of clip-path property for revealing content effect. This experiment will work on Latest Chrome, haven’t tested on another browser.
15 of 100Spread CSS cards

Animated Spread cards
Andrew Canham
SEPTEMBER 04, 2017
HTML, CSS and JavaScript
16 of 100Environment Impact CSS Cards (GSAP)

SVG animation with GSAP+MorphSVG, responsive. Hover on PC or tap on mobile.
Anton Mudrenok
DECEMBER 22, 2016
HTML, CSS and JavaScript
17 of 100Card UI Skeleton Screen

This creates a skeleton of a card component using CSS custom properties to draw different gradients on the background-image. Skeleton screens can be used to improve perceived performance while loading.
18 of 1003d flexbox flippable card with shiny

Based on the real sizes of a standard business card, but it flips with shine. Needs more shadow!
19 of 100Plain Blog Card fun

That just some fun in material design
20 of 100Drag and drop CSS cards

Drag-and-drop cards implemented using React and dragula.
Graham Marlow
FEBRUARY 05, 2016
HTML, CSS and JavaScript
21 of 100Bootstrap CSS cards tutorial

Bootstrap cards tutorial for article on blog
22 of 100Journalist Flip Card

Animated Press Card
Anders Schmidt Hansen
AUGUST 14, 2013
HTML, CSS and JavaScript
23 of 100Gift Card UI

Works best in Chrome (and browsers that support clip-path).
24 of 100Flip – card memory game

The game will save your stats locally, via localStorage.
25 of 100CSS Cards – BTS on Soompi

Fetch the latest BTS articles from Soompi RSS feed and display them in a card stack. (Should be) Accessible with keyboard navigation.
26 of 100Simple card flip effect using Anime.js

A Simple card flip effect using Anime.js
27 of 100Fancy quote and card animation

Fancy quote and card animation
Andreas Neeven
OCTOBER 09, 2015
HTML, CSS and JavaScript
28 of 100Card Article UI

A simple reusable card based article UI with various overlay background.
29 of 100Material card opening effect

Material design interface animations
Luiz Otávio Carvalho
MARCH 15, 2015
HTML, CSS and JavaScript
30 of 100Simple Contact Card

A simple contact card with a banner, photo, links to social media, and an email form once a button is clicked.
31 of 100Business Card and flip effects

Business Card
32 of 100Animated Chart CSS Cards

A series of animated chart cards using the least amount of css and information as possible
33 of 100Beautiful Movie Card with animation

A movie card with animation and open with youtube video.
Alex Fernandez
OCTOBER 16, 2015
HTML, CSS and JavaScript
34 of 1003d effect Business Card

This is an online version of the business card.
35 of 100Responsive and colorful Profile Card

Responsive and colorful Profile Card concept. I hope you like it.
Muhammed Erdem
SEPTEMBER 23, 2018
HTML, CSS and JavaScript
36 of 100Responsive Company CSS Cards

Card design + switch view
of 100Navigation Info CSS Cards

Responsive Navigation Info Cards
38 of 100Material Playing CSS Cards

Material Playing Cards, this is just the backbone for a full on 30s demo that I’m creating within a few days.
39 of 100Material Design Card – For Blog Post Article

A card style blog post build with HTML5 , CSS3 and a little bit of jQuery
40 of 100Stacked CSS Cards with sliding effects

Stacked card with navigation!
41 of 100Geometric business card with CSS Grid

Playing around with css grid, flexbox, clip-path, and radial-gradient
42 of 100Animated Weather CSS Cards

Seamless animation between states, and some of animations break outside the container. Select the weather icons on the top to see each state.
43 of 100CSS3 Card Deck Drop Down

A simple menu made fun! This “card deck dropdown” is a beautiful display of what can be achieved using some CSS3 transitions, a little JS, and some creative thinking!. This is a UI concept i have seen before but i felt there was a few things that could be done different. Ao here is my version of a Card Deck style dropdown, using CSS3 transitions and jQuery.
44 of 100Simple Blog Card

A simple, responsive card UI component made with Vue.js.
45 of 100Digital Business Card

Save some trees! Make a digital business card!
46 of 100MDL horizontal card

Material design MDL cards. Extended horizontal cards.
47 of 100Card Stack with beautiful animation

Displays a stack of cards. When the user hovers (or taps) the cards, they spread out and the user can hover (or tap) each card to see it.
48 of 100Expanding card page transition effect

The card expands into the background, no libraries, commented. Please note: this code is in no way ready to be used as is in production on your website. It will need to be adapted to be cross browser compliant & accessible. I just wanted to share how one might go about this effect with CSS & JS and no other dependencies
49 of 100Material Design: Profile Card

Material Design: Profile Card
50 of 1003D perspective card XY

xAxis and yAxis parallax. Used some JS to rotate the card on mouse movement.
Carlos Sánchez Riballo
OCTOBER 16, 2015
HTML, CSS and JavaScript
51 of 100News CSS Cards

Pure CSS news cards with revealing content on hover.
52 of 100Product Card with slider animation

Product card with nice sliding effects
53 of 100Delivery Card Animation

Looks best in Chrome. Some parts are bugged in FF. Not working in IE below edge (if it’s not working in edge, let me know pls). Card dimensions probably broken on mobile, except for iPhone 6 (because I was hardcoding pixels for this model). Don’t forget to click request button inside card.
Nikolay Talanov
AUGUST 22, 2015
HTML, CSS and JavaScript
54 of 100Clash of Clans CSS Cards

Cards with slide effects.
55 of 100The Image with a and .date that all:hovers

Card with image hover effect
56 of 100Hearthstone Style Card Hover

HTML/CSS version of card hover effects similar to Hearthstone.
57 of 100Parallax Depth CSS Cards

Parallaxed backgrounds and layers in cards.
58 of 100Article News Card

Article News Card
59 of 100Expanding Card Grid With Flexbox

Inspired by the Google Image Gallery, card grid with expanding sections.
60 of 100Mobile CSS Cards Design

Mobile expanding cards with sports info.
61 of 100CSS Blog Cards

A very minimal responsive blog card design.
62 of 100Comment Card Animation

Flip through a stack of comment cards
63 of 100Simple Flexbox CSS Cards

Flexbox to design really nice card layouts, and this is an example on how to do it
64 of 100Isometric Card Grid

CSS grid to organize the cards, a vanilla CSS variable to control the scrolling, and much less JavaScript.Due to use of some modern CSS techniques, this demo won’t work properly in IE. Scrolling in Safari is jumpy, don’t know why.
65 of 100Material Design CSS Cards

Material design cards test and study.
Mattia Astorino
JANUARY 25, 2015
HTML, CSS and JavaScript
66 of 100Swipeable CSS Cards nightly

A card stack UI with swipeable cards.
67 of 100Material Design – Responsive card

Responsive material card based on Google Material Color palette in a bootstrap grid.
68 of 100News card with fade in icon on hover

News card with fade in icon on hove
LittleSnippets.net
JULY 16, 2016
HTML, CSS and JavaScript
69 of 100Animated color CSS cards

Fun card animation with vanilla js
70 of 100Sliding Notifications card

Card design, feed animation, hidden navigation, sliding card to show menu. Menu icon micro-interaction + hover effect using amazing hover.css library Just a touch of jquery to fire event on click
71 of 100Cards with vertical carrousel concept

Cards with Vertical carrousel concept
72 of 100Player/User Cards with more info on hover

Mouse over the card for more info
73 of 100Parallax on card

Parallax on mouse movement and “device orientation”. Be sure to also check it out on mobile.
74 of 100Profile card design with sequenced animation

Profile card, Profile design, sequenced animation
75 of 100Makeup Palettes with flip effects

Using grid inside flex, instead of the other way around
76 of 100CSS Grid: Recipe Layout

Grid Recipe Layout developed using only CSS
77 of 100Pure CSS clickable flip cards

Pure CSS clickable flip cards using only css
78 of 100CSS Flip Card (content with JS)

Rotation effect with only CSS using transform, and HTML content created with JSON.
Diego Bruno Rodrigues
OCTOBER 26, 2016
HTML, CSS and JavaScript
79 of 100Card Flip Jquery

Flip Cards using Jquery
80 of 100CSS Business Card

The physical world is so last year. Save the trees with a digital business card.
Keith Pickering
FEBRUARY 01, 2015
HTML, CSS and JavaScript
81 of 100Simple flip card CSS

Simple profile flip card using CSS
82 of 100Bootstrap 4 – Flip cards

Flip cards using Bootstrap 4
83 of 100Card Flipping AngularJS

Card Flipping AngularJS
84 of 100React – Flip Cards Design

React – Flip Cards Design for actors
85 of 1003D 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!
86 of 100Player Flip Cards

A simple css only flip cards.
87 of 100Google Now Inspired Flip Cards

Google Now style info cards with CSS card flip animation.
88 of 100Social Flip Cards

Messing around with 3d transforms and delayed transitions.
89 of 100Style Flip-card Menu

This uses the Foundation framework for much of the style, and has a pure CSS flip-card menu.
90 of 100Realistic 3D Image Flip Box, Flip Card, 3d Image hover

Realistic 3D Image Flip Box Flip Card Kallyas
Nicola Mihaita
OCTOBER 26, 2016
HTML, CSS and JavaScript
91 of 100Half flip cards 3d

Responsive half flip card with 3d transform on bootstrap grid.
David Foliti
SEPTEMBER 27, 2016
HTML, CSS and JavaScript
92 of 100React – Flip Cards

Responsive Flip Card display
Thomas Herman
SEPTEMBER 27, 2016
HTML, CSS and JavaScript
93 of 100Bulma + Vuejs Flip Card

credit : bulma, vuejs, devices.css, chancejs, css-flip
Dzulfikar Adi Putra
OCTOBER 18, 2016
HTML, CSS and JavaScript
94 of 100Flipping card UI

Flipping card UI
95 of 100React Flipping Card with Tutorial

Learn How to Create Quick and Simple React Flipping Card tutorial
96 of 100Cross-Browser Flip Card

A GSAP powered cross-browser 3D flip card sample. Basically it uses two different elements that are animated at the same time to create the flip card, without using preserve-3d which is not supported by IE.
Rodrigo Hernando
MARCH 10, 2017
HTML, CSS and JavaScript
97 of 100Pure CSS Flip Card

Pure CSS Flip Card
98 of 1003D Profile Flip Card

These are 3D Profile Flip Cards. Click the i to flip the card. The concept started out as a hover event, but that proved challenging on a mobile device, so I opted to use a bit of js to change out classes on click/touch. There are a variety of flip options, Y, X and Diagonal
99 of 1003D Flip Card Effect

3D flip cards implemented with CSS3
100 of 100Multi Flip Cards

My goal was to create re-useable card-like elements that flip on hover (or tap!). I’ve built markup for a flippable card that you can use to hold any content you want on the front or the back of the card. Simply set the size of the containing .flip-card element and put whatever you want into .front and .back and style accordingly. It gracefully degrades too: Webkit: Cards flip with a 3D effect Firefox & IE10: Cards flip but no 3d effect IE9 and down: Back instantly appears on hover
Discussion about this post