Post thumbnail: 106 CSS Cards

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

Demo image: Blog Card

Author

  • Daiquiri.io

Made with

  • HTML (Pug) / CSS (Less)

About the code

Blog Card

Blog card with transparent text animation.

Demo Image: Blog Card
Demo Image: Blog Card

Blog Card

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

Demo Image: CSS News Cards
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
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
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
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
Demo Image: Responsive Company Cards

Responsive Company Cards

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

Demo Image: Blog Card
Demo Image: Blog Card

Blog Card

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

Demo Image: Blog Entry Layouts
Demo Image: Blog Entry Layouts

Blog Entry Layouts

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

Business Cards

Demo image: Inspiration Card

Author

  • Dannie Vinther

Made with

  • HTML
  • CSS

About the code

Inspiration Card

Simple card.

Demo Image: Business Card
Demo Image: Business Card

Business Card

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

Demo image: Business Card

Author

  • Gigi

Made with

  • HTML (Pug) / CSS (Sass)

About the code

Business Card

Simple business card page with animated background.

Demo Image: Business Card
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
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
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
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
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
Demo Image: CSS3 Business Card

CSS3 Business Card

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

Demo Image: CSS Business Card
Demo Image: CSS Business Card

CSS Business Card

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

Demo image: Business Card

Author

  • Eduard Kosicky

Made with

  • HTML / CSS (SCSS)

About the code

Business Card

A business card concept with hover effect.

Card Animations

Demo image: Card Animation

Author

  • Lam Chang

Made with

  • HTML / CSS

About the code

Card Animation

Card animation with CSS, HTML and some hover events.

Card Grids

Demo image: CSS Responsive Cards

Author

  • Neil Sandbach

Made with

  • HTML / CSS

About the code

CSS Responsive Cards

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

Demo image: Pure CSS 3D Cards

Author

  • Piotr Galor

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.

Demo image: Isometric Card Grid

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.

Demo image: Card Grid

Author

  • John

Made with

  • HTML
  • CSS/SCSS

About the code

Card Grid

Pure CSS card grid.

Demo Image: 3D Fold Out Reveal
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
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
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
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
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

Card Sliders

Demo Image: Clash Of Clans Cards
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
Demo Image: Information Card Slider

Information Card Slider

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

Ecommerce Cards

Demo image: E-commerce Shop (Single Item)

Author

  • Julie Park

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.

Demo image: CSS Product Card UI

Author

  • Omar Dsoky

Made with

  • HTML
  • CSS

About the code

CSS Product Card UI

HTML and CSS product card UI.

Demo Image: Flipping Product Card
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
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
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)
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

Demo image: Shopping Card UI

Author

  • Tobi Balogun

Made with

  • HTML / CSS

About the code

Shopping Card UI

Shopping card based on the Silk UI Kit.

Demo Image: Product Card
Demo Image: Product Card

Product Card

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

Demo Image: Product Card
Demo Image: Product Card

Product Card

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

Demo Image: Flexy Product Cards
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
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
Demo Image: Product Card

Product Card

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

Flip Cards

Demo image: Flippy Cards

Author

  • Kayleigh Foley

Made with

  • HTML / CSS (SCSS)

About the code

Flippy Cards

Pure CSS flippy cards.

Demo image: Flip Card

Author

  • Aron

Made with

  • HTML / CSS (SCSS)

About the code

Flip Card

Pure CSS horizontal and vertical flip card.

Demo image: Card Flip

Author

  • Marcos Paulo

Made with

  • HTML
  • CSS
  • JavaScript (anime.js)

About the code

Card Flip

A simple card flip effect using Anime.js.

Demo image: 3D Product Cards

Author

  • Zac

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.

Demo image: Parallax Card

Author

  • Hakkam Abdullah

Made with

  • HTML
  • CSS

About the code

Parallax Card

An interesting idea for parallax flip card.

Demo image: Parallax Flipping Cards

Author

  • Tyrell Rummage

Made with

  • HTML
  • CSS

About the code

Parallax Flipping Cards

Cool HTML and CSS parallax flipping cards.

Demo image: Element Card

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
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
Demo Image: Flip Animation

Flip Animation

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

Demo Image: React Flipping Card
Demo Image: React Flipping Card

React Flipping Card

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

Demo Image: Flipping Card
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
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
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
Demo Image: CSS Card Flip

CSS Card Flip

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

Hover Effects For Cards

Demo image: Same Height Cards

Author

  • Veronica

Made with

  • HTML / CSS

About the code

Same Height Cards

Same height cards with CSS flexbox and hover effect.

Demo image: Card Hover Interaction

Author

  • Kalyan Lahkar

Made with

  • HTML
  • CSS

About the code

Card Hover Interaction

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

Demo image: Card Transition

Author

  • Angel Davcev

Made with

  • HTML (Pug) / CSS (Sass)

About the code

Card Transition

Hover effect for card with CSS transition.

Demo image: House Of Cards

Author

  • Mojtaba Seyedi

Made with

  • HTML
  • CSS/SCSS
  • JavaScript

About the code

House Of Cards

Collection of 15 cards with HTML, CSS and JS.

Demo image: Simple CARD Hover Effect

Author

  • YaroslavW

Made with

  • HTML
  • CSS

About the code

Simple CARD Hover Effect

Nice hover effect for cards.

Demo image: Animated Video Grid

Author

  • Dan

Made with

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

About the code

Animated Video Grid

Hover on the card effects.

Demo Image: Parallax Depth Cards
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
Demo Image: 2017 Card

2017 Card

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

Demo Image: Card Hover
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
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

Demo image: Jelly Effect In Card

Author

  • Zé Bateira

Made with

  • HTML / CSS

About the code

Jelly Effect In Card

Jelly effect in card on hover.

Demo Image: Material Card with Animated Featured Image
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

Demo image: Hover The Rainbow

Author

  • Alessandro Pilastrini

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

Demo image: Planets App SVG Animation

Author

  • Valentine

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
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
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
Demo Image: Delivery Card Animation

Delivery Card Animation

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

Movie Cards

Demo image: Movie Cards

Author

  • Ryan

Made with

  • HTML / CSS (SCSS)

About the code

Movie Cards

Responsive movie cards.

Demo Image: Responsive Movie Card
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
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
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
Demo Image: Movie Card

Movie Card

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

Demo Image: Movie Card
Demo Image: Movie Card

Movie Card

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

Profile Cards

Demo image: CSS Profile Card

Author

  • Byurhan Beyzat

Made with

  • HTML / CSS (SCSS)

About the code

CSS Profile Card

CSS profile card UI with light and dark themes.

Demo image: Contact Me Animation

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
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
Demo Image: User Profile

User Profile

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

Demo image: Twitter Author Card

Author

  • David East

Made with

  • HTML
  • CSS

About the code

Twitter Author Card

Flashing Twitter author card.

Demo Image: User Profile 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
Demo Image: Profile Card

Profile Card

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

Demo Image: Materialup Profile Card
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
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
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
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
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

Recipe Cards

Demo Image: Recipe Card Design
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
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
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
Demo Image: Recipe Card

Recipe Card

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

Stacked Cards

Demo image: CSS Cards

Author

  • Jhey

Made with

  • HTML (Pug) / CSS (Stylus)

About the code

CSS Cards

Pure CSS stacked cards.

Demo image: Polaroid Memories CSS Only

Author

  • Nico

Made with

  • HTML
  • CSS/SCSS

About the code

Polaroid Memories CSS Only

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

Demo Image: Stacked Cards Hover Effects
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
Demo Image: Card Stack Animation

Card Stack Animation

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

Demo Image: Comment Card Animation
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
Demo Image: Cards Stack

Cards Stack

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

Demo Image: Card Stack
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

back to top