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
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.
3) 3D hover plane effect
Simple 3D plane hover effect using CSS3 transform
4) 3D Fold out reveal
Click to reveal more info. Info folds out beneath the card, while the rest of the grid recedes.
5) Animated Card Stacks
Testing some simple animations to separate stacks of cards
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.
7) Flying cards tabs
Cards flying away randomly
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
11) Tinder swipe cards
Tinder swipe cards made with hammer.js
12) Web Material Card Concept
material design card ui
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.
14) Spread cards
Animated Spread cards
15) Environment Impact Cards (GSAP)
SVG animation with GSAP+MorphSVG, responsive. Hover on PC or tap on mobile.
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!
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.
20) Bootstrap cards tutorial
Bootstrap cards tutorial for article on blog
21) Journalist Flip Card
Animated Press Card
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.
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.
25) Simple card flip effect using Anime.js
A Simple card flip effect using Anime.js
26) Fancy quote and card animation
Fancy quote and card animation
27) Card Article UI
A simple reusable card based article UI with various overlay background.
28) Material card opening effect
Material design interface animations
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.
30) Business Card and flip effects
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.
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.
35) Responsive Company Cards
Card design + switch view
36) Navigation Info Cards
Responsive Navigation Info Cards
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!
40) Geometric business card with CSS Grid
Playing around with css grid, flexbox, clip-path, and radial-gradient
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.
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.
43) Simple Blog Card
A simple, responsive card UI component made with Vue.js.
44) Digital Business Card
Save some trees! Make a digital business card!
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
48) Material Design: Profile Card
Material Design: Profile Card
49) 3D perspective card XY
xAxis and yAxis parallax. Used some JS to rotate the card on mouse movement.
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
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.
53) Clash of Clans Cards
Cards with slide effects.
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.
57) Article News Card
Article News Card
58) Expanding Card Grid With Flexbox
Inspired by the Google Image Gallery, card grid with expanding sections.
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
64) Material Design Cards
Material design cards test and study.
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.
67) News card with fade in icon on hover
News card with fade in icon on hove
68) Animated color cards
Fun card animation with vanilla js
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
70) Cards with vertical carrousel concept
Cards with Vertical carrousel concept
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
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.
78) Card Flip Jquery
Flip Cards using Jquery
79) CSS Business Card
The physical world is so last year. Save the trees with a digital business card.
80) Simple flip card CSS
Simple profile flip card using CSS
81) Bootstrap 4 – Flip cards
Flip cards using Bootstrap 4
82) Card Flipping AngularJS
Card Flipping AngularJS
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.
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
90) Half flip cards 3d
Responsive half flip card with 3d transform on bootstrap grid.
91) React – Flip Cards
Responsive Flip Card display
92) Bulma + Vuejs Flip Card
credit : bulma, vuejs, devices.css, chancejs, css-flip
93) Flipping card UI
Flipping card UI
94) React Flipping Card with Tutorial
Learn How to Create Quick and Simple React Flipping Card tutorial
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.
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
98) 3D Flip Card Effect
3D flip cards implemented with CSS3
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