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.

Table of Contents

1. Blog Cards
2. Business Cards
3. Card Animations
4. Card Grids
5. Card Sliders
6. Ecommerce Cards
7. Flip Cards
8. Hover Effects for Cards
9. Mobile Cards
10. Movie Cards
11. Profile Cards
12. Recipe Cards
13. Stacked Cards

Blog Cards

Author

• Daiquiri.io
• March 1, 2017

Links

• demo and code

Made with

• HTML (Pug) / CSS (Less)

About the code

Blog Card

Blog card with transparent text animation.

Blog Card

Blog card with HTML and CSS.
Made by IMarty
January 30, 2017

CSS News Cards

Pure CSS news cards with revealing content on hover.
Made by Aleksandar Čugurović
January 14, 2017

Blog Post Item

Post preview with CSS animations and SVG icon sprite.
Made by Nodws
September 25, 2016

Article News Card

HTML and CSS article news card designed by JustinKwak.
Made by Andy Tran
June 19, 2016

Blog Cards

A very minimal responsive blog card design.
Made by Chyno Deluxe
April 18, 2016

Responsive Company Cards

Card design and switch view.
Made by Pham Mikun
November 1, 2015

Blog Card

Blog card with hover state.
Made by szpakoli
March 4, 2015

Blog Entry Layouts

Blog entry layouts in HTML and CSS.
Made by Russ Beye
December 20, 2014

Business Cards

Author

• Liz Wendling
• March 25, 2018

Links

• demo and code

Made with

• HTML / CSS (Less)

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
• September 18, 2017

Links

• demo and code

Made with

• HTML
• CSS

About the code

Inspiration Card

Simple card.

Business Card

HTML, CSS and JS business card.
Made by Lubos
March 13, 2017

Author

• Gigi
• November 13, 2016

Links

• demo and code

Made with

• HTML (Pug) / CSS (Sass)

About the code

Business Card

Simple business card page with animated background.

Business Card

Business card with HTML and CSS.
Made by Zach Saucier
September 28, 2016

3D Flip Business Card

3D flip business card with HTML/CSS.
Made by Elena Nazarova
August 29, 2016

Digital Business Card

Digital business card with HTML, CSS and JavaScript.
Made by Will Johnson
February 21, 2016

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

Flippable Online Business Card

Flippable online business card in HTML and CSS.
Made by Petrus Rex
October 30, 2015

CSS3 Business Card

Flippable CSS3 business card.
Made by Mark Murray
October 16, 2015

CSS Business Card

This pen is sketch for a digital business card.
Made by jasper
September 8, 2014

Author

• Eduard Kosicky
• July 28, 2014

Links

• demo and code

Made with

• HTML / CSS (SCSS)

About the code

Business Card

A business card concept with hover effect.

Card Animations

Author

• Lam Chang
• February 06, 2018

Links

• demo and code

Made with

• HTML / CSS

About the code

Card Animation

Card animation with CSS, HTML and some hover events.

Card Grids

Author

• Neil Sandbach
• June 14, 2018

Links

• demo and code

Made with

• HTML / CSS

About the code

CSS Responsive Cards

Responsive cards (1 / 2 / 3 cols); card footer; css flex properties for equal heights.

Author

• Piotr Galor
• June 7, 2018

Links

• demo and code

Made with

• HTML / CSS

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
• January 27, 2018

Links

• demo and code

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.

Author

• John
• December 18, 2017

Links

• demo and code

Made with

• HTML
• CSS/SCSS

About the code

Card Grid

Pure CSS card grid.

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

Material Design - Responsive Card

Responsive material card based on Google material color palette in a Bootstrap grid.
Made by David Foliti
October 21, 2016

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

Expanding Card Grid With Flexbox

Inspired by the Google image gallery, card grid with expanding sections.
Made by Naila Ahmad
January 12, 2016

Multi-Height Grid Layout

A grid that is compatible with multi-height content.
Made by Cliff Pyles
December 11, 2015

Card Sliders

Clash Of Clans Cards

Clash Of Clans cards in HTML and CSS.
Made by Andre Madarang
May 19, 2016

Information Card Slider

HTML/CSS/JS information card slider.
Made by Andy Tran
November 23, 2015

Ecommerce Cards

Author

• Julie Park
• May 29, 2018

Links

• demo and code

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.

Author

• Omar Dsoky
• August 8, 2017

Links

• demo and code

Made with

• HTML
• CSS

About the code

CSS Product Card UI

HTML and CSS product card UI.

Flipping Product Card

HTML/CSS/JS flipping product card.
Made by Jhonny Gil
March 21, 2017

UI Design - Product Card

HTML & CSS UI design product card.
Made by CodeFrog
March 21, 2017

Product Card

HTML, CSS and JavaScript product card.
Made by Oscar
February 23, 2017

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
• January 31, 2017

Links

• demo and code

Made with

• HTML / CSS

About the code

Shopping Card UI

Shopping card based on the Silk UI Kit.

Product Card

Product card in HTML and CSS.
Made by Alexandra K
October 15, 2016

Product Card

HTML, CSS and JavaScript product card.
Made by Jonathan Obino
February 1, 2016

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

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

Product Card

Product card with HTML, CSS and JavaScript.
Made by Virgil Pana
March 10, 2015

Flip Cards

Author

• Kayleigh Foley
• March 28, 2018

Links

• demo and code

Made with

• HTML / CSS (SCSS)

About the code

Flippy Cards

Pure CSS flippy cards.

Author

• Aron
• March 12, 2018

Links

• demo and code

Made with

• HTML / CSS (SCSS)

About the code

Flip Card

Pure CSS horizontal and vertical flip card.

Author

• Marcos Paulo
• January 9, 2018

Links

• demo and code

Made with

• HTML
• CSS
• JavaScript (anime.js)

About the code

Card Flip

A simple card flip effect using Anime.js.

Author

• Zac
• December 18, 2017

Links

• demo and code

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
• August 15, 2017

Links

• demo and code

Made with

• HTML
• CSS

About the code

Parallax Card

An interesting idea for parallax flip card.

Author

• Tyrell Rummage
• July 31, 2017

Links

• demo and code

Made with

• HTML
• CSS

About the code

Parallax Flipping Cards

Cool HTML and CSS parallax flipping cards.

Author

• Mario Duarte
• June 22, 2017

Links

• demo and code

Made with

• HTML
• CSS/SCSS
• JavaScript/Babel (jQuery.js)

About the code

Element Card

Card UI with a simple 3D interaction.

3D Flipping Cards

Just a cute little card flipping demo.
Made by Rita Bradley
May 4, 2017

Flip Animation

CSS flip animation for card.
Made by Eina O
April 18, 2017

React Flipping Card

Simple React flipping card.
Made by Alex Devero
January 9, 2017

Flipping Card

Flipping card with HTML, CSS and JavaScript.
Made by Sergey Nikishkin
December 29, 2016

Realistic 3D Image Flip Card

Realistic 3D image flip box flip card Kallyas WordPress theme.
Made by Nicola Mihaita
October 26, 2016

Google Now Inspired Flip Cards

Google Now style info cards with CSS card flip animation.
Made by Ettrics
October 8, 2016

CSS Card Flip

Simple card flip using CSS 3D transforms and transitions.
Made by Cole Bemis
December 30, 2014

Hover Effects For Cards

Author

• Veronica
• May 13, 2018

Links

• demo and code

Made with

• HTML / CSS

About the code

Same Height Cards

Same height cards with CSS flexbox and hover effect.

Author

• Kalyan Lahkar
• January 1, 2018

Links

• demo and code

Made with

• HTML
• CSS

About the code

Card Hover Interaction

Dribbble shot conversion of Nancy Nguyen titled Article Card Hover Interaction.

Author

• Angel Davcev
• December 14, 2017

Links

• demo and code

Made with

• HTML (Pug) / CSS (Sass)

About the code

Card Transition

Hover effect for card with CSS transition.

Author

• Mojtaba Seyedi
• September 27, 2017

Links

• demo and code

Made with

• HTML
• CSS/SCSS
• JavaScript

About the code

House Of Cards

Collection of 15 cards with HTML, CSS and JS.

Author

• YaroslavW
• September 17, 2017

Links

• demo and code

Made with

• HTML
• CSS

About the code

Simple CARD Hover Effect

Nice hover effect for cards.

Author

• Dan
• June 14, 2017

Links

• demo and code

Made with

• HTML
• CSS/SCSS
• JavaScript (jQuery.js)

About the code

Animated Video Grid

Hover on the card effects.

Parallax Depth Cards

Concept of parallaxed backgrounds and layers in cards.
Made by Andy Merskin
March 16, 2017

2017 Card

Card with 3D effect.
Made by Phil
January 28, 2017

Card Hover

Card hover effect with HTML and CSS.
Made by Jorge Sanes
January 25, 2017

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
• December 12, 2015

Links

• demo and code

Made with

• HTML / CSS

About the code

Jelly Effect In Card

Jelly effect in card on hover.

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
• December 6, 2014

Links

• demo and code

Made with

• HTML
• CSS

About the code

Hover The Rainbow

"Hover the rainbow" is a simple hover effect for card and box element, 100% CSS!

Mobile Cards

Author

• Valentine
• July 7, 2017

Links

• demo and code

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.

Bulma + Vuejs Flip Card

Flip card with HTML, CSS and JavaScript.
Made by Dzulfikar Adi Putra
October 18, 2016

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

Delivery Card Animation

Delivery card animation with HTML, CSS and JavaScript.
Made by Nikolay Talanov
November 12, 2015

Movie Cards

Author

• Simone Bernabè
• February 19, 2018

Links

• demo and code

Made with

• HTML / CSS (SCSS)

About the code

Movie Card

Responsive movie card - light version. Dark version: https://codepen.io/simoberny/pen/qxxOqj

Author

• Ryan
• May 29, 2017

Links

• demo and code

Made with

• HTML / CSS (SCSS)

About the code

Movie Cards

Responsive movie cards.

Responsive Movie Card

HTML & CSS responsive movie card.
Made by Mehmet Burak Erman
May 12, 2017

Daily UI Movie Card

Daily UI movie card with HTML and CSS.
Made by George Mironidis
September 14, 2016

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

Movie Card

A movie card.
Made by Alex Fernandez
November 28, 2015

Movie Card

Movie card with HTML and CSS.
Made by Andre Madarang
January 2, 2015

Profile Cards

Author

• Byurhan Beyzat
• March 15, 2018

Links

• demo and code

Made with

• HTML / CSS (SCSS)

About the code

CSS Profile Card

CSS profile card UI with light and dark themes.

Author

• Aaron Taylor
• July 23, 2017

Links

• demo and code

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.

HTML & CSS Profile UI

A user profile in HTML and CSS.
Made by Genaro Colusso
March 13, 2017

User Profile

Fully responsive and animated user profile card.
Made by Gabrielle Wee
January 31, 2017

Author

• David East
• January 17, 2017

Links

• demo and code

Made with

• HTML
• CSS

About the code

Twitter Author Card

Flashing Twitter author card.

User Profile Card

User profile card in HTML, CSS and JavaScript.
Made by XiChen
November 2, 2016

Profile Card

Simple HTML and CSS profile card.
Made by Matthias Martin
April 27, 2016

Materialup Profile Card

Materialup profile card with HTML, CSS and JavaScript.
Made by neel
January 18, 2016

Material Design: Profile Card

Material design profile card with HTML and CSS.
Made by Emil Devantie Brockdorff
January 15, 2016

Live Material Design User Widget

HTML, CSS and JavaScript live material design user widget.
Made by Mattia Astorino
January 8, 2016

2 Sided Card

2 sided card with HTML, CSS and JavaScript.
Made by Jesse Couch
September 22, 2014

90’s Profile Card

HTML and CSS 90’s profile card.
Made by Ondřej Bárta
November 22, 2013

Recipe Cards

Recipe Card Design

Recipe card design in HTML and CSS.
Made by Travis Williamson
November 9, 2016

Unfolding Recipe Card

Unfolding recipe card with HTML, CSS and JavaScript.
Made by Dany Santos
October 12, 2016

Recipe Card UI Design

Example of a recipe card design using CSS3 animation.
Made by Riccardo Tartaglia
February 12, 2016

Recipe Card

HTML and CSS recipe card.
Made by Kevin Lesht
September 10, 2015

Stacked Cards

Author

• Jhey
• June 8, 2018

Links

• demo and code

Made with

• HTML (Pug) / CSS (Stylus)

About the code

CSS Cards

Pure CSS stacked cards.

Author

• Nico
• September 28, 2017

Links

• demo and code

Made with

• HTML
• CSS/SCSS

About the code

Polaroid Memories CSS Only

Just some polaroid memories using css custom properties, filters and transitions.

Stacked Cards Hover Effects

Just playing around with more CSS transitions and hover effects.
Made by Kyle Brumm
May 17, 2017

Card Stack Animation

Card stack tutorial animation.
Made by Brandon Ward
May 12, 2017

Comment Card Animation

Flip through a stack of comment cards.
Made by Shaw
June 22, 2016

Cards Stack

Cards stack/fan in CSS3 with some jQuery.
Made by Jermaine
November 20, 2014

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