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
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.
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
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
16 of 100Environment Impact CSS Cards (GSAP)
SVG animation with GSAP+MorphSVG, responsive. Hover on PC or tap on mobile.
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.
21 of 100Bootstrap CSS cards tutorial
Bootstrap cards tutorial for article on blog
22 of 100Journalist Flip Card
Animated Press Card
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
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
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
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.
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.
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.
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.
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.
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
65 of 100Material Design CSS Cards
Material design cards test and study.
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
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.
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.
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
91 of 100Half flip cards 3d
Responsive half flip card with 3d transform on bootstrap grid.
92 of 100React – Flip Cards
Responsive Flip Card display
93 of 100Bulma + Vuejs Flip Card
credit : bulma, vuejs, devices.css, chancejs, css-flip
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.
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