106 CSS Cards
Collection of free HTML and CSS card design: business, product, profile, flip, stack, grid, layout, animation, etc. Update of January 2018 collection. 19 new examples.
- Blog Cards
- Business Cards
- Card Animations
- Card Grids
- Card Sliders
- Ecommerce Cards
- Flip Cards
- Hover Effects for Cards
- Mobile Cards
- Movie Cards
- Profile Cards
- Recipe Cards
- Stacked Cards
- CSS Flip Cards
- CSS CSS Material Design Cards
Author
- Daiquiri.io
About the code
Blog Card
Blog card with transparent text animation.
Demo Image: Blog Card
Blog Card
Blog card with HTML and CSS.
Made by IMarty
January 30, 2017
Demo Image: CSS News Cards
CSS News Cards
Pure CSS news cards with revealing content on hover.
Made by Aleksandar Čugurović
January 14, 2017
Demo Image: Blog Post Item
Blog Post Item
Post preview with CSS animations and SVG icon sprite.
Made by Nodws
September 25, 2016
Demo Image: Article News Card
Article News Card
HTML and CSS article news card designed by JustinKwak.
Made by Andy Tran
June 19, 2016
Demo Image: Blog Cards
Blog Cards
A very minimal responsive blog card design.
Made by Chyno Deluxe
April 18, 2016
Demo Image: Responsive Company Cards
Responsive Company Cards
Card design and switch view.
Made by Pham Mikun
November 1, 2015
Demo Image: Blog Card
Blog Card
Blog card with hover state.
Made by szpakoli
March 4, 2015
Demo Image: Blog Entry Layouts
Blog Entry Layouts
Blog entry layouts in HTML and CSS.
Made by Russ Beye
December 20, 2014
Author
- Liz Wendling
About the code
Geometric Business Card with CSS Grid
Playing around with CSS grid, flexbox, clip-path, and radial-gradient. Recreating the business card template as found here: https://novadonna.me/product/business-card-template-designs-pop-geometric/.
Author
- Dannie Vinther
About the code
Inspiration Card
Simple card.
Demo Image: Business Card
Business Card
HTML, CSS and JS business card.
Made by Lubos
March 13, 2017
About the code
Business Card
Simple business card page with animated background.
Demo Image: Business Card
Business Card
Business card with HTML and CSS.
Made by Zach Saucier
September 28, 2016
Demo Image: 3D Flip Business Card
3D Flip Business Card
3D flip business card with HTML/CSS.
Made by Elena Nazarova
August 29, 2016
Demo Image: Digital Business Card
Digital Business Card
Digital business card with HTML, CSS and JavaScript.
Made by Will Johnson
February 21, 2016
Demo Image: CSS Business Card
CSS Business Card
The physical world is so last year. Save the trees with a digital business card.
Made by Keith Pickering
January 8, 2016
Demo Image: Flippable Online Business Card
Flippable Online Business Card
Flippable online business card in HTML and CSS.
Made by Petrus Rex
October 30, 2015
Demo Image: CSS3 Business Card
CSS3 Business Card
Flippable CSS3 business card.
Made by Mark Murray
October 16, 2015
Demo Image: CSS Business Card
CSS Business Card
This pen is sketch for a digital business card.
Made by jasper
September 8, 2014
Author
- Eduard Kosicky
About the code
Business Card
A business card concept with hover effect.
Author
- Lam Chang
About the code
Card Animation
Card animation with CSS, HTML and some hover events.
Author
- Neil Sandbach
About the code
CSS Responsive Cards
Responsive cards (1 / 2 / 3 cols); card footer; css flex properties for equal heights.
About the code
Pure CSS 3D Cards
Reactive and responsive pure CSS 3D cards with direction aware CSS hovers. VR inspired layout.
Author
- Jon Kantner
Made with
- HTML (Pug) / CSS / JavaScript
About the code
Isometric Card Grid
A remake of an older demo, which is a Codrops-inspired scrollable grid component. Made withh 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.
About the code
Card Grid
Pure CSS card grid.
Demo Image: 3D Fold Out Reveal
3D Fold Out Reveal
Click to reveal more info. Info folds out beneath the card, while the rest of the grid recedes.
Made by Andrew Canham
November 8, 2016
Demo Image: Material Design - Responsive Card
Material Design - Responsive Card
Responsive material card based on Google material color palette in a Bootstrap grid.
Made by David Foliti
October 21, 2016
Demo Image: Flexbox Card Grid
Flexbox Card Grid
Quick prototype of equal height cards using flexbox grid layout. Also demonstrates the use of CSS aspect ratios (check out the images) and CSS filters.
Made by Craig Anthony
October 21, 2016
Demo Image: Expanding Card Grid With Flexbox
Expanding Card Grid With Flexbox
Inspired by the Google image gallery, card grid with expanding sections.
Made by Naila Ahmad
January 12, 2016
Demo Image: Multi-Height Grid Layout
Multi-Height Grid Layout
A grid that is compatible with multi-height content.
Made by Cliff Pyles
December 11, 2015
Demo Image: Clash Of Clans Cards
Clash Of Clans Cards
Clash Of Clans cards in HTML and CSS.
Made by Andre Madarang
May 19, 2016
Demo Image: Information Card Slider
Information Card Slider
HTML/CSS/JS information card slider.
Made by Andy Tran
November 23, 2015
Made with
- HTML / CSS (SCSS) / JavaScript
About the code
E-commerce Shop (Single Item)
Here is a single item (card) UI design for Nike Epic React Flyknit.
About the code
CSS Product Card UI
HTML and CSS product card UI.
Demo Image: Flipping Product Card
Flipping Product Card
HTML/CSS/JS flipping product card.
Made by Jhonny Gil
March 21, 2017
Demo Image: UI Design - Product Card
UI Design - Product Card
HTML & CSS UI design product card.
Made by CodeFrog
March 21, 2017
Demo Image: Product Card
Product Card
HTML, CSS and JavaScript product card.
Made by Oscar
February 23, 2017
Demo Image: E-Commerce Shop (Single Item)
E-Commerce Shop (Single Item)
E-Commerce shop (single item) with HTML, CSS and JavaScript.
Made by Fabio Ottaviani
February 21, 2017
Author
- Tobi Balogun
About the code
Shopping Card UI
Shopping card based on the Silk UI Kit.
Demo Image: Product Card
Product Card
Product card in HTML and CSS.
Made by Alexandra K
October 15, 2016
Demo Image: Product Card
Product Card
HTML, CSS and JavaScript product card.
Made by Jonathan Obino
February 1, 2016
Demo Image: Flexy Product Cards
Flexy Product Cards
This pen was just a little play around using flexbox techniques, creating some super slick product cards with a swanky animation.
Made by Jack Thomson
January 18, 2016
Demo Image: Product Page
HTML and CSS Product Page
Responsive version of a product page with elements that overhang the cards they’re on.
Made by Chase Marlow
November 25, 2015
Demo Image: Product Card
Product Card
Product card with HTML, CSS and JavaScript.
Made by Virgil Pana
March 10, 2015
Author
- Kayleigh Foley
About the code
Flippy Cards
Pure CSS flippy cards.
About the code
Flip Card
Pure CSS horizontal and vertical flip card.
Author
- Marcos Paulo
Made with
- HTML
- CSS
- JavaScript (anime.js)
About the code
Card Flip
A simple card flip effect using Anime.js.
Made with
- HTML
- CSS/Sass
- JavaScript/Babel
About the code
3D Product Cards
A project I used to learn a little bit more about using 3D CSS properties and some practice with more performant animated shadow effects.
The little things that make me happy: - More performant box-shadow transitions. Box shadow is applied to :after and only the opacity is being animated.
Author
- Hakkam Abdullah
About the code
Parallax Card
An interesting idea for parallax flip card.
Author
- Tyrell Rummage
About the code
Parallax Flipping Cards
Cool HTML and CSS parallax flipping cards.
Author
- Mario Duarte
Made with
- HTML
- CSS/SCSS
- JavaScript/Babel (jQuery.js)
About the code
Element Card
Card UI with a simple 3D interaction.
Demo Image: 3D Flipping Cards
3D Flipping Cards
Just a cute little card flipping demo.
Made by Rita Bradley
May 4, 2017
Demo Image: Flip Animation
Flip Animation
CSS flip animation for card.
Made by Eina O
April 18, 2017
Demo Image: React Flipping Card
React Flipping Card
Simple React flipping card.
Made by Alex Devero
January 9, 2017
Demo Image: Flipping Card
Flipping Card
Flipping card with HTML, CSS and JavaScript.
Made by Sergey Nikishkin
December 29, 2016
Demo Image: Realistic 3D Image Flip Card
Realistic 3D Image Flip Card
Realistic 3D image flip box flip card Kallyas WordPress theme.
Made by Nicola Mihaita
October 26, 2016
Demo Image: Google Now Inspired Flip Cards
Google Now Inspired Flip Cards
Google Now style info cards with CSS card flip animation.
Made by Ettrics
October 8, 2016
Demo Image: CSS Card Flip
CSS Card Flip
Simple card flip using CSS 3D transforms and transitions.
Made by Cole Bemis
December 30, 2014
About the code
Same Height Cards
Same height cards with CSS flexbox and hover effect.
Author
- Kalyan Lahkar
About the code
Card Hover Interaction
Dribbble shot conversion of Nancy Nguyen titled Article Card Hover Interaction.
Author
- Angel Davcev
About the code
Card Transition
Hover effect for card with CSS transition.
Author
- Mojtaba Seyedi
About the code
House Of Cards
Collection of 15 cards with HTML, CSS and JS.
Author
- YaroslavW
About the code
Simple CARD Hover Effect
Nice hover effect for cards.
Made with
- HTML
- CSS/SCSS
- JavaScript (jQuery.js)
About the code
Animated Video Grid
Hover on the card effects.
Demo Image: Parallax Depth Cards
Parallax Depth Cards
Concept of parallaxed backgrounds and layers in cards.
Made by Andy Merskin
March 16, 2017
Demo Image: 2017 Card
2017 Card
Card with 3D effect.
Made by Phil
January 28, 2017
Demo Image: Card Hover
Card Hover
Card hover effect with HTML and CSS.
Made by Jorge Sanes
January 25, 2017
Demo Image: 3D Perspective Card XY
3D Perspective Card XY
Used some JS to rotate the card on mouse movement.
Made by Carlos Sánchez Riballo
March 29, 2016
Author
- Zé Bateira
About the code
Jelly Effect In Card
Jelly effect in card on hover.
Demo Image: Material Card With Animated Featured Image
Material Card With Animated Featured Image
Experiment with material design. Animates the featured image and headline and adds button when hovered.
Made by Knol Aust
March 16, 2015
Author
- Alessandro Pilastrini
About the code
Hover The Rainbow
"Hover the rainbow" is a simple hover effect for card and box element, 100% CSS!
Made with
- HTML
- CSS/SCSS
- JavaScript (jQuery.js)
About the code
Planets App SVG Animation
Clicking on a planet reveals more information about that planet.
Demo Image: Bulma + Vuejs Flip Card
Bulma + Vuejs Flip Card
Flip card with HTML, CSS and JavaScript.
Made by Dzulfikar Adi Putra
October 18, 2016
Demo Image: Article Card UI - Read More CSS Animation
Article Card UI - Read More CSS Animation
This pen is an article card UI aimed more at mobile users although this could probably work for an article layout, click on the excerpt to view a bit more of the content and then you’re presented with the option to read the full article.
Made by Valentine
September 28, 2016
Demo Image: Delivery Card Animation
Delivery Card Animation
Delivery card animation with HTML, CSS and JavaScript.
Made by Nikolay Talanov
November 12, 2015
Author
- Simone Bernabè
About the code
Movie Card
Responsive movie card - light version. Dark version: https://codepen.io/simoberny/pen/qxxOqj
About the code
Movie Cards
Responsive movie cards.
Demo Image: Responsive Movie Card
Responsive Movie Card
HTML & CSS responsive movie card.
Made by Mehmet Burak Erman
May 12, 2017
Demo Image: Daily UI Movie Card
Daily UI Movie Card
Daily UI movie card with HTML and CSS.
Made by George Mironidis
September 14, 2016
Demo Image: Movie Card Interactive UI With Pure CSS3 Animation Rating
Movie Card Interactive UI With Pure CSS3 Animation Rating
A CSS3 animated movie card. Using CSS3 only to animate and keep track of the rating.
Made by Reece McDonald
January 4, 2016
Demo Image: Movie Card
Movie Card
A movie card.
Made by Alex Fernandez
November 28, 2015
Demo Image: Movie Card
Movie Card
Movie card with HTML and CSS.
Made by Andre Madarang
January 2, 2015
Author
- Byurhan Beyzat
About the code
CSS Profile Card
CSS profile card UI with light and dark themes.
Author
- Aaron Taylor
Made with
- HTML
- CSS/SCSS
- JavaScript (jQuery.js)
About the code
Contact Me Animation
Click on the "Contact Me" button to see it in action.
Demo Image: HTML & CSS Profile UI
HTML & CSS Profile UI
A user profile in HTML and CSS.
Made by Genaro Colusso
March 13, 2017
Demo Image: User Profile
User Profile
Fully responsive and animated user profile card.
Made by Gabrielle Wee
January 31, 2017
Author
- David East
About the code
Twitter Author Card
Flashing Twitter author card.
Demo Image: User Profile Card
User Profile Card
User profile card in HTML, CSS and JavaScript.
Made by XiChen
November 2, 2016
Demo Image: Profile Card
Profile Card
Simple HTML and CSS profile card.
Made by Matthias Martin
April 27, 2016
Demo Image: Materialup Profile Card
Materialup Profile Card
Materialup profile card with HTML, CSS and JavaScript.
Made by neel
January 18, 2016
Demo Image: Material Design: Profile Card
Material Design: Profile Card
Material design profile card with HTML and CSS.
Made by Emil Devantie Brockdorff
January 15, 2016
Demo Image: Live Material Design User Widget
Live Material Design User Widget
HTML, CSS and JavaScript live material design user widget.
Made by Mattia Astorino
January 8, 2016
Demo Image: 2 Sided Card
2 Sided Card
2 sided card with HTML, CSS and JavaScript.
Made by Jesse Couch
September 22, 2014
Demo Image: 90’s Profile Card
90’s Profile Card
HTML and CSS 90’s profile card.
Made by Ondřej Bárta
November 22, 2013
Demo Image: Recipe Card Design
Recipe Card Design
Recipe card design in HTML and CSS.
Made by Travis Williamson
November 9, 2016
Demo Image: Unfolding Recipe Card
Unfolding Recipe Card
Unfolding recipe card with HTML, CSS and JavaScript.
Made by Dany Santos
October 12, 2016
Demo Image: Recipe Card UI Design
Recipe Card UI Design
Example of a recipe card design using CSS3 animation.
Made by Riccardo Tartaglia
February 12, 2016
Demo Image: Recipe Card
Recipe Card
HTML and CSS recipe card.
Made by Kevin Lesht
September 10, 2015
Made with
- HTML (Pug) / CSS (Stylus)
About the code
CSS Cards
Pure CSS stacked cards.
About the code
Polaroid Memories CSS Only
Just some polaroid memories using css custom properties, filters and transitions.
Demo Image: Stacked Cards Hover Effects
Stacked Cards Hover Effects
Just playing around with more CSS transitions and hover effects.
Made by Kyle Brumm
May 17, 2017
Demo Image: Card Stack Animation
Card Stack Animation
Card stack tutorial animation.
Made by Brandon Ward
May 12, 2017
Demo Image: Comment Card Animation
Comment Card Animation
Flip through a stack of comment cards.
Made by Shaw
June 22, 2016
Demo Image: Cards Stack
Cards Stack
Cards stack/fan in CSS3 with some jQuery.
Made by Jermaine
November 20, 2014
Demo Image: Card Stack
Card Stack
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.
Made by Lane Olson
May 30, 2013