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
- Muhammed Erdem
- September 16, 2018
- HTML / SCSS / JS
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
JUNE 29, 2015
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.
SEPTEMBER 13, 2015
04 of 1003D hover plane effect
Simple 3D plane hover effect using CSS3 transform
FEBRUARY 14, 2015
05 of 1003D Fold out reveal
Click to reveal more info. Info folds out beneath the card, while the rest of the grid recedes.
NOVEMBER 04, 2015
06 of 100Animated CSS Cards Stacks
Testing some simple animations to separate stacks of cards
MAY 24, 2014
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.
APRIL 26, 2016
08 of 100Flying CSS cards tabs
Cards flying away randomly
FEBRUARY 05, 2017
09 of 100Calendar card with 3d effects
Calendar card and added a 3d effect
JANUARY 21, 2017
10 of 100Flexbox Cards with Animation
A short proof of concept for making cards with onclick animation events.
MAY 09, 2016
11 of 100Animated Christmas Card
Animated Christmas card
DECEMBER 25, 2016
12 of 100Tinder swipe CSS cards
Tinder swipe cards made with hammer.js
NOVEMBER 26, 2017
13 of 100Web Material Card Concept
material design card ui
OCTOBER 22, 2015
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.
SEPTEMBER 16, 2015
15 of 100Spread CSS cards
Animated Spread cards
SEPTEMBER 04, 2017
16 of 100Environment Impact CSS Cards (GSAP)
SVG animation with GSAP+MorphSVG, responsive. Hover on PC or tap on mobile.
DECEMBER 22, 2016
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.
AUGUST 09, 2017
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!
AUGUST 03, 2016
19 of 100Plain Blog Card fun
That just some fun in material design
JANUARY 12, 2016
20 of 100Drag and drop CSS cards
Drag-and-drop cards implemented using React and dragula.
FEBRUARY 05, 2016
21 of 100Bootstrap CSS cards tutorial
Bootstrap cards tutorial for article on blog
OCTOBER 23, 2015
22 of 100Journalist Flip Card
Animated Press Card
Anders Schmidt Hansen
AUGUST 14, 2013
23 of 100Gift Card UI
Works best in Chrome (and browsers that support clip-path).
MAY 27, 2015
24 of 100Flip – card memory game
The game will save your stats locally, via localStorage.
JANUARY 17, 2015
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.
JUNE 04, 2018
26 of 100Simple card flip effect using Anime.js
A Simple card flip effect using Anime.js
JANUARY 09, 2018
27 of 100Fancy quote and card animation
Fancy quote and card animation
OCTOBER 09, 2015
28 of 100Card Article UI
A simple reusable card based article UI with various overlay background.
OCTOBER 27, 2015
29 of 100Material card opening effect
Material design interface animations
Luiz Otávio Carvalho
MARCH 15, 2015
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.
JANUARY 24, 2016
31 of 100Business Card and flip effects
JULY 21, 2014
32 of 100Animated Chart CSS Cards
A series of animated chart cards using the least amount of css and information as possible
JULY 23, 2015
33 of 100Beautiful Movie Card with animation
A movie card with animation and open with youtube video.
OCTOBER 16, 2015
34 of 1003d effect Business Card
This is an online version of the business card.
AUGUST 16, 2016
35 of 100Responsive and colorful Profile Card
Responsive and colorful Profile Card concept. I hope you like it.
SEPTEMBER 23, 2018
36 of 100Responsive Company CSS Cards
Card design + switch view
JUNE 10, 2015
of 100Navigation Info CSS Cards
Responsive Navigation Info Cards
JULY 08, 2017
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.
JULY 25, 2015
39 of 100Material Design Card – For Blog Post Article
A card style blog post build with HTML5 , CSS3 and a little bit of jQuery
MARCH 17, 2015
40 of 100Stacked CSS Cards with sliding effects
Stacked card with navigation!
JUNE 16, 2015
41 of 100Geometric business card with CSS Grid
Playing around with css grid, flexbox, clip-path, and radial-gradient
MARCH 25, 2018
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.
AUGUST 22, 2016
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.
JULY 22, 2013
44 of 100Simple Blog Card
A simple, responsive card UI component made with Vue.js.
JUNE 08, 2018
45 of 100Digital Business Card
Save some trees! Make a digital business card!
OCTOBER 09, 2015
46 of 100MDL horizontal card
Material design MDL cards. Extended horizontal cards.
JULY 12, 2015
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.
MAY 30, 2013
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
FEBRUARY 10, 2017
49 of 100Material Design: Profile Card
Material Design: Profile Card
Emil Devantie Brockdorff
JANUARY 15, 2016
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
51 of 100News CSS Cards
Pure CSS news cards with revealing content on hover.
AUGUST 14, 2016
52 of 100Product Card with slider animation
Product card with nice sliding effects
MARCH 08, 2015
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.
AUGUST 22, 2015
54 of 100Clash of Clans CSS Cards
Cards with slide effects.
MAY 19, 2016
55 of 100The Image with a and .date that all:hovers
Card with image hover effect
JANUARY 17, 2019
56 of 100Hearthstone Style Card Hover
HTML/CSS version of card hover effects similar to Hearthstone.
SEPTEMBER 21, 2017
57 of 100Parallax Depth CSS Cards
Parallaxed backgrounds and layers in cards.
NOVEMBER 21, 2016
58 of 100Article News Card
Article News Card
MAY 08, 2015
59 of 100Expanding Card Grid With Flexbox
Inspired by the Google Image Gallery, card grid with expanding sections.
DECEMBER 24, 2015
60 of 100Mobile CSS Cards Design
Mobile expanding cards with sports info.
MAY 08, 2015
61 of 100CSS Blog Cards
A very minimal responsive blog card design.
AUGUST 24, 2015
62 of 100Comment Card Animation
Flip through a stack of comment cards
MAY 13, 2016
63 of 100Simple Flexbox CSS Cards
Flexbox to design really nice card layouts, and this is an example on how to do it
AUGUST 27, 2015
64 of 100Isometric Card Grid
JANUARY 27, 2018
65 of 100Material Design CSS Cards
Material design cards test and study.
JANUARY 25, 2015
66 of 100Swipeable CSS Cards nightly
A card stack UI with swipeable cards.
JANUARY 27, 2014
67 of 100Material Design – Responsive card
Responsive material card based on Google Material Color palette in a bootstrap grid.
JULY 27, 2015
68 of 100News card with fade in icon on hover
News card with fade in icon on hove
JULY 16, 2016
69 of 100Animated color CSS cards
Fun card animation with vanilla js
JANUARY 15, 2019
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
JANUARY 12, 2019
71 of 100Cards with vertical carrousel concept
Cards with Vertical carrousel concept
NOVEMBER 17, 201
72 of 100Player/User Cards with more info on hover
Mouse over the card for more info
JANUARY 11, 2019
73 of 100Parallax on card
Parallax on mouse movement and “device orientation”. Be sure to also check it out on mobile.
JANUARY 11, 2019
74 of 100Profile card design with sequenced animation
Profile card, Profile design, sequenced animation
JANUARY 11, 2019
75 of 100Makeup Palettes with flip effects
Using grid inside flex, instead of the other way around
DECEMBER 23, 2018
76 of 100CSS Grid: Recipe Layout
Grid Recipe Layout developed using only CSS
JANUARY 09, 2019
77 of 100Pure CSS clickable flip cards
Pure CSS clickable flip cards using only css
SEPTEMBER 25, 2018
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
79 of 100Card Flip Jquery
Flip Cards using Jquery
FEBRUARY 16, 2015
80 of 100CSS Business Card
The physical world is so last year. Save the trees with a digital business card.
FEBRUARY 01, 2015
81 of 100Simple flip card CSS
Simple profile flip card using CSS
OCTOBER 12, 2015
82 of 100Bootstrap 4 – Flip cards
Flip cards using Bootstrap 4
FEBRUARY 09, 2017
83 of 100Card Flipping AngularJS
Card Flipping AngularJS
JULY 30, 2015
84 of 100React – Flip Cards Design
React – Flip Cards Design for actors
MAY 11, 2018
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!
MAY 04, 2017
86 of 100Player Flip Cards
A simple css only flip cards.
MARCH 06, 2015
87 of 100Google Now Inspired Flip Cards
Google Now style info cards with CSS card flip animation.
MARCH 17, 2015
88 of 100Social Flip Cards
Messing around with 3d transforms and delayed transitions.
AUGUST 05, 2012
89 of 100Style Flip-card Menu
This uses the Foundation framework for much of the style, and has a pure CSS flip-card menu.
SEPTEMBER 18, 2015
90 of 100Realistic 3D Image Flip Box, Flip Card, 3d Image hover
Realistic 3D Image Flip Box Flip Card Kallyas
OCTOBER 26, 2016
91 of 100Half flip cards 3d
Responsive half flip card with 3d transform on bootstrap grid.
SEPTEMBER 27, 2016
92 of 100React – Flip Cards
Responsive Flip Card display
SEPTEMBER 27, 2016
93 of 100Bulma + Vuejs Flip Card
credit : bulma, vuejs, devices.css, chancejs, css-flip
Dzulfikar Adi Putra
OCTOBER 18, 2016
94 of 100Flipping card UI
Flipping card UI
mario s maselli
JULY 03, 2015
95 of 100React Flipping Card with Tutorial
Learn How to Create Quick and Simple React Flipping Card tutorial
JANUARY 09, 2017
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.
MARCH 10, 2017
97 of 100Pure CSS Flip Card
Pure CSS Flip Card
MARCH 12, 2018
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
NOVEMBER 02, 2012
99 of 1003D Flip Card Effect
3D flip cards implemented with CSS3
AUGUST 23, 2014
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
DECEMBER 11, 2012
Discussion about this post