In this article, we listed the hand-picked awesome css card collections and developed using css, html, jQuery, Ionic, ReactJs, VueJs and etc. Listed tutorials well played with colors, gradients or shapes. some of the cards are have beautiful animation effects using transitions. Demo and download available on each tutorial. Cards can be used directly without any changes and could be small changes based on your needs.
Article will be helpful for designers and non-coders.
Comment your favorite Cards or comment the cards which you admired from external resource.
1) Ionic Swoosh Cards
Ionic Swoosh Cards
Loring Dodge
JUNE 29, 2015
HTML, CSS and JavaScript
2) Interactive 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.
Iva Dopuđ
SEPTEMBER 13, 2015
HTML, CSS and JavaScript
3) 3D hover plane effect
Simple 3D plane hover effect using CSS3 transform
Rian Ariona
FEBRUARY 14, 2015
HTML, CSS and JavaScript
4) 3D 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
5) Animated Card Stacks
Testing some simple animations to separate stacks of cards
Chris Hutchinson
MAY 24, 2014
HTML, CSS and JavaScript
6) Hearthstone 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.
Jack Rugile
APRIL 26, 2016
HTML, CSS and JavaScript
7) Flying cards tabs
Cards flying away randomly
Biliana
FEBRUARY 05, 2017
HTML, CSS and JavaScript
8) Calendar card with 3d effects
Calendar card and added a 3d effect
9) Flexbox Cards with Animation
A short proof of concept for making cards with onclick animation events.
10) Animated Christmas Card
Animated Christmas card
Łukasz Niedźwiecki
DECEMBER 25, 2016
HTML, CSS and JavaScript
11) Tinder swipe cards
Tinder swipe cards made with hammer.js
Rob Vermeer
NOVEMBER 26, 2017
HTML, CSS and JavaScript
12) Web Material Card Concept
material design card ui
Mason Fox
OCTOBER 22, 2015
HTML, CSS and JavaScript
13) Material VCard
Another example of clip-path property for revealing content effect. This experiment will work on Latest Chrome, haven’t tested on another browser.
Rian Ariona
SEPTEMBER 16, 2015
HTML, CSS and JavaScript
14) Spread cards
Animated Spread cards
Andrew Canham
SEPTEMBER 04, 2017
HTML, CSS and JavaScript
15) Environment Impact Cards (GSAP)
SVG animation with GSAP+MorphSVG, responsive. Hover on PC or tap on mobile.
Anton Mudrenok
DECEMBER 22, 2016
HTML, CSS and JavaScript
16) Card 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.
17) 3d flexbox flippable card with shiny
Based on the real sizes of a standard business card, but it flips with shine. Needs more shadow!
Adam Crockett
AUGUST 03, 2016
HTML, CSS and JavaScript
18) Plain Blog Card fun
That just some fun in material design
19) Drag and drop cards
Drag-and-drop cards implemented using React and dragula.
Graham Marlow
FEBRUARY 05, 2016
HTML, CSS and JavaScript
20) Bootstrap cards tutorial
Bootstrap cards tutorial for article on blog
21) Journalist Flip Card
Animated Press Card
Anders Schmidt Hansen
AUGUST 14, 2013
HTML, CSS and JavaScript
22) Gift Card UI
Works best in Chrome (and browsers that support clip-path).
23) Flip – card memory game
The game will save your stats locally, via localStorage.
Codrin Pavel
JANUARY 17, 2015
HTML, CSS and JavaScript
24) 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.
Halida Astatin
JUNE 04, 2018
HTML, CSS and JavaScript
25) Simple card flip effect using Anime.js
A Simple card flip effect using Anime.js
Marcos Paulo
JANUARY 09, 2018
HTML, CSS and JavaScript
26) Fancy quote and card animation
Fancy quote and card animation
Andreas Neeven
OCTOBER 09, 2015
HTML, CSS and JavaScript
27) Card Article UI
A simple reusable card based article UI with various overlay background.
28) Material card opening effect
Material design interface animations
Luiz Otávio Carvalho
MARCH 15, 2015
HTML, CSS and JavaScript
29) Simple Contact Card
A simple contact card with a banner, photo, links to social media, and an email form once a button is clicked.
Max Kurapov
JANUARY 24, 2016
HTML, CSS and JavaScript
30) Business Card and flip effects
Business Card
31) Animated Chart Cards
A series of animated chart cards using the least amount of css and information as possible
32) Beautiful Movie Card with animation
A movie card with animation and open with youtube video.
Alex Fernandez
OCTOBER 16, 2015
HTML, CSS and JavaScript
33) 3d effect Business Card
This is an online version of the business card.
34) Responsive and colorful Profile Card
Responsive and colorful Profile Card concept. I hope you like it.
Muhammed Erdem
SEPTEMBER 23, 2018
HTML, CSS and JavaScript
35) Responsive Company Cards
Card design + switch view
36) Navigation Info Cards
Responsive Navigation Info Cards
Nathan Taylor
JULY 08, 2017
HTML, CSS and JavaScript
37) Material Playing Cards
Material Playing Cards, this is just the backbone for a full on 30s demo that I’m creating within a few days.
38) Material Design Card – For Blog Post Article
A card style blog post build with HTML5 , CSS3 and a little bit of jQuery
39) Stacked Cards with sliding effects
Stacked card with navigation!
Prasanna Pegu
JUNE 16, 2015
HTML, CSS and JavaScript
40) Geometric business card with CSS Grid
Playing around with css grid, flexbox, clip-path, and radial-gradient
Liz Wendling
MARCH 25, 2018
HTML, CSS and JavaScript
41) Animated Weather Cards
Seamless animation between states, and some of animations break outside the container. Select the weather icons on the top to see each state.
Steve Gardner
AUGUST 22, 2016
HTML, CSS and JavaScript
42) CSS3 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.
Brady Sammons
JULY 22, 2013
HTML, CSS and JavaScript
43) Simple Blog Card
A simple, responsive card UI component made with Vue.js.
Katherine Kato
JUNE 08, 2018
HTML, CSS and JavaScript
44) Digital Business Card
Save some trees! Make a digital business card!
Will Johnson
OCTOBER 09, 2015
HTML, CSS and JavaScript
45) MDL horizontal card
Material design MDL cards. Extended horizontal cards.
46) Card 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.
47) Expanding 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
Rachel Smith
FEBRUARY 10, 2017
HTML, CSS and JavaScript
48) Material Design: Profile Card
Material Design: Profile Card
Emil Devantie Brockdorff
JANUARY 15, 2016
HTML, CSS
49) 3D 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
50) News Cards – CSS only
Pure CSS news cards with revealing content on hover.
51) Product Card with slider animation
Product card with nice sliding effects
Virgil Pana
MARCH 08, 2015
HTML, CSS and JavaScript
52) Delivery 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
53) Clash of Clans Cards
Cards with slide effects.
Andre Madarang
MAY 19, 2016
HTML, CSS and JavaScript
54) The Image with a and .date that all:hovers
Card with image hover effect
55) Hearthstone Style Card Hover
HTML/CSS version of card hover effects similar to Hearthstone.
56) Parallax Depth Cards
Parallaxed backgrounds and layers in cards.
Andy Merskin
NOVEMBER 21, 2016
HTML, CSS and JavaScript
57) Article News Card
Article News Card
58) Expanding Card Grid With Flexbox
Inspired by the Google Image Gallery, card grid with expanding sections.
Naila Ahmad
DECEMBER 24, 2015
HTML, CSS and JavaScript
59) Mobile Cards Design
Mobile expanding cards with sports info.
60) CSS Blog Cards
A very minimal responsive blog card design.
61) Comment Card Animation
Flip through a stack of comment cards
62) Simple Flexbox Cards
Flexbox to design really nice card layouts, and this is an example on how to do it
63) Isometric 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.
Jon Kantner
JANUARY 27, 2018
HTML, CSS and JavaScript
64) Material Design Cards
Material design cards test and study.
Mattia Astorino
JANUARY 25, 2015
HTML, CSS and JavaScript
65) Swipeable Cards nightly
A card stack UI with swipeable cards.
66) Material Design – Responsive card
Responsive material card based on Google Material Color palette in a bootstrap grid.
David Foliti
JULY 27, 2015
HTML, CSS and JavaScript
67) News card with fade in icon on hover
News card with fade in icon on hove
LittleSnippets.net
JULY 16, 2016
HTML, CSS and JavaScript
68) Animated color cards
Fun card animation with vanilla js
Alex Zaworski
JANUARY 15, 2019
HTML, CSS and JavaScript
69) Sliding 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
Sabine Robart
JANUARY 12, 2019
HTML, CSS and JavaScript
70) Cards with vertical carrousel concept
Cards with Vertical carrousel concept
Recreatorus
NOVEMBER 17, 201
HTML, CSS and JavaScript
71) Player/User Cards with more info on hover
Mouse over the card for more info
72) Parallax on card
Parallax on mouse movement and “device orientation”. Be sure to also check it out on mobile.
73) Profile card design with sequenced animation
Profile card, Profile design, sequenced animation
Sabine Robart
JANUARY 11, 2019
HTML, CSS and JavaScript
74) Makeup Palettes with flip effects
Using grid inside flex, instead of the other way around
75) CSS Grid: Recipe Layout
Grid Recipe Layout developed using only CSS
76) Pure CSS clickable flip cards
Pure CSS clickable flip cards using only css
77) CSS 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
78) Card Flip Jquery
Flip Cards using Jquery
bycreator
FEBRUARY 16, 2015
HTML, CSS and JavaScript
79) CSS 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
80) Simple flip card CSS
Simple profile flip card using CSS
81) Bootstrap 4 – Flip cards
Flip cards using Bootstrap 4
Chrisbo246
FEBRUARY 09, 2017
HTML, CSS and JavaScript
82) Card Flipping AngularJS
Card Flipping AngularJS
Zachary Beyer
JULY 30, 2015
HTML, CSS and JavaScript
83) React – Flip Cards Design
React – Flip Cards Design for actors
84) 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!
85) Player Flip Cards
A simple css only flip cards.
Nick Nikolov
MARCH 06, 2015
HTML, CSS and JavaScript
86) Google Now Inspired Flip Cards
Google Now style info cards with CSS card flip animation.
87) Social Flip Cards
Messing around with 3d transforms and delayed transitions.
88) Style Flip-card Menu
This uses the Foundation framework for much of the style, and has a pure CSS flip-card menu.
89) Realistic 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
90) Half flip cards 3d
Responsive half flip card with 3d transform on bootstrap grid.
David Foliti
SEPTEMBER 27, 2016
HTML, CSS and JavaScript
91) React – Flip Cards
Responsive Flip Card display
Thomas Herman
SEPTEMBER 27, 2016
HTML, CSS and JavaScript
92) Bulma + Vuejs Flip Card
credit : bulma, vuejs, devices.css, chancejs, css-flip
Dzulfikar Adi Putra
OCTOBER 18, 2016
HTML, CSS and JavaScript
93) Flipping card UI
Flipping card UI
mario s maselli
JULY 03, 2015
HTML, CSS and JavaScript
94) React Flipping Card with Tutorial
Learn How to Create Quick and Simple React Flipping Card tutorial
Alex Devero
JANUARY 09, 2017
HTML, CSS and JavaScript
95) Cross-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
96) Pure CSS Flip Card
Pure CSS Flip Card
97) 3D 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
Nick Hempsey
NOVEMBER 02, 2012
HTML, CSS and JavaScript
98) 3D Flip Card Effect
3D flip cards implemented with CSS3
Samet Erpik
AUGUST 23, 2014
HTML, CSS and JavaScript
99) Multi 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