When a need to display information about someone or something, including title, text, icons, images, and buttons, one of the best ways of doing so is using a card. Fortunately, you don’t have to spend a lot of time coding them since these 45 best card designs and excellent choices. Read on to find out what suits your requirements best.
1. CSS Clip-Path Card Hover Effects
See the Pen CSS Clip-path Card Hover Effects by Ahmad Emran (@ahmadbassamemran) on CodePen.
This CSS card design uses beautiful and eye-catching square cards. Upon hovering on them, the cards reveal a new piece of information. It uses CSS and HTML, whereas the author is Ahmad Emran.
2. Two-Sided, Flippable CSS Card
See the Pen Two Sided, Flipable CSS Card by Marc Ferrold (@Ossoona) on CodePen.
This CSS card design facilitates beautifully animated cards for your site. You have up to three choices to choose from depending on how you want to flip it. One can settle for clicking the button, clicking the card, or hovering on it to flip it. The author is Marc Ferrold, and it uses HTML/CSS.
3. Hovering Cards
See the Pen hovering cards by karim jawhar (@kjawhar15) on CodePen.
This is a set of three beautiful slanting cards with different background colors and slanting angles. Upon hovering on the card, it stands upright and reveals the content perfectly. The author is Karim Jawhar, whereas it uses HTML and CSS.
4. CSS-Tricks Card Carousel
See the Pen CSS-Tricks Card Carousel by William Goldsworthy (@william-goldsworthy) on CodePen.
This CSS card design uses several cards at a go. Each card has an animation effect upon hovering over it. Expect a colorful animated line and an animated white incomplete circular border. These stacked CSS cards are beautiful, and the author is William Goldsworthy. The code uses HTML and CSS.
5. CSS Card Stack Flip
See the Pen CSS Card Stack flip by Madison Dickson (@mix3d) on CodePen.
It includes a stack of cards with a shadow around their edges. The cards have a colorful artistic pattern hard to miss. Upon clicking on a card, it flips and reveals information. The author is Madison Dickson, whereas it uses HTML, CSS, and JS.
6. Infocard CSS Only V1
See the Pen InfoCard CSS Only V1 by Emil Alicic (@LIMESTA) on CodePen.
A retractable card characterizes this design. In the beginning, the card reveals very little, but that changes once you hover over it. It expands and reveals more information. The author is Emil Alicic, whereas it uses HTML and CSS.
7. Google Now Inspired Cards
See the Pen Google Now Inspired Flip Cards by Ettrics (@ettrics) on CodePen.
It is a set of several cards with different background colors. Each one of them has a drop-shadow effect. Equally important, the cards will flip upon touching or clicking them. That prompts them to reveal more content which they source from the personal assistant, Google Now. The author is Ettrics, whereas it uses HTML, CSS, and JS.
8. Realistic 3d Image Flip Card
See the Pen Realistic 3D Image Flip Box, Flip Card, 3d Image hover, Kallyas WordPress Theme by Nicola Mihaita (@nicolamihaita) on CodePen.
This CSS card design is ideal for headlines, including those that occupy more than one line. Therefore, you are not limited to using a particular length for the design to look the way you need it to. The author is Lindsey, whereas it uses HTML and CSS.
9. A Combined CSS Card Design
See the Pen A <figure> with a <figcaption>… and .date that all:hovers by Joshua Ward (@joshuaward) on CodePen.
This is a card design that includes several elements. On one side, expect the text, image, and figure. On the other side, there is the symbol of that card. Upon hovering over it, the card will flip to show either side of the card, depending on the one you are viewing at the moment. The author is Joshua Ward, whereas it uses HTML and CSS.
10. 3D Cut Out Card
See the Pen 3D Cutout Card by Dannie Vinther (@dannievinther) on CodePen.
This 3D animation CSS card design is beautiful and perfect for blogs, profiles, and ads, just but to mention a few. Expects noticeable animation along the borders upon hovering over it. The author is Dannie Vinther, whereas it uses HTML and CSS.
11. Pure CSS Card Flip
See the Pen Pure CSS Card Flip by Eddy Sims (@edeesims) on CodePen.
The card has two sides that you can use to display different content. When viewing certain information, hovering over the card flips it to expose another piece of information. The author is Eddy Sims, whereas it uses HTML and CSS.
12. Cards – Codepen Assets
See the Pen Cards – Codepen assets by Sowmya Seshadri (@sowmyaseshadri) on CodePen.
This CSS card design offers you various buttons for different tasks. There is an animated effect if you hover over them, including border changing from dotted to solid. The author is Sowmya Seshadri whereas it uses HTML and CSS.
13. Reveal Card Content On Hover
See the Pen Reveal Card Content on Hover by Mark Mead (@markmead) on CodePen.
In the beginning, the card is usually straightforward with little information. However, upon hovering over it, it reveals more information and a dotted shadow-box. The author is Mark Mead, whereas it uses HTML and CSS.
14. Polaroid Memories –CSS Only
See the Pen Polaroid Memories – CSS only by Nico (@nicokoenig) on CodePen.
If you want cards to display photos, look no further since this is one of the best CSS card designs for this job. The animated display of many photos is undeniably beautiful. The author, Nico, uses HTML and CSS, including transitions, filters, and properties.
15. Cards Against Developers
See the Pen Cards Against Developers(Tap to choose!) 😈😅 #CodePenChallenge by Jhey (@jh3y) on CodePen.
If you choose this card design, you will be dealing with stacked cards. The cards will rotate upon clicking them. Whereas the author is Jhey, it uses HTML and CSS.
16. Card Animation
See the Pen Card Animation by Janne Leppänen (@JanneLeppanen) on CodePen.
Following an animation effect, the card forms a wavy line that separates a beautiful photo and the content. The author is Janne Leppanen, whereas it uses HTML and CSS.
17. Ui – Flip Card
See the Pen UI – Flip Card (using :focus-within for a11y) by Abubaker Saeed (@AbubakerSaeed) on CodePen.
This CSS cards design is characterized by a card that flips upon hovering over it. The author is Abubaker Saeed, whereas it uses HTML and CSS.
18. CSS Card Animation
See the Pen CSS Card Animation by Jan Cantor (@jancantor) on CodePen.
It is important to note that the card design is relatively simple. However, due to the distinctive background color, it is hard to miss. The author is Jan Cantor, whereas it uses HTML and CSS.
19. CSS Cards With Drop-Shadow Effect
See the Pen CSS cards with drop-shadow effect by Jaroslaw Hubert (@jhkepa) on CodePen.
Whether you want blog cards, inspiration cards, or news cards, this is one of the CSS card designs that will not disappoint. It is simply a car with a stylish border and an attractive background color. The drop-shadow effect makes it stand out. The author is Jaroslaw Hubert, whereas it uses HTML and CSS.
20. Info Cards Concept
See the Pen Info Cards Concept by Yancy Min (@yancy) on CodePen.
These cards are often recommended for someone looking for the ideal choice for news. The author is Yancy Min, and it uses HTML and CSS.
21. Pollux Card
See the Pen Pollux Card by Tsumari (@TSUmari) on CodePen.
The author, Tsumari, puts at your disposal several CSS cards. They are pretty attractive, primarily when you use them for a blog card or anime news feed. The code uses CSS and HTML.
22. Card Animation
See the Pen Card animation by Lam Chang (@lamchang) on CodePen.
For a developer looking for a profile card, this design will serve that purpose right. At a glance, it has a scrolling background hence easy to notice. Equally important, it has an animation effect upon hovering over it. The hover enlarges the card besides zooming it out, blurring, or changing its color.
23. Card Animation
See the Pen Card Animation by Jon Yablonski (@jonyablonski) on CodePen.
The card design has stacked triangles at the top left side of the card. Upon hovering over it, the triangles become large and centered. It is recommended for a profile card, and it comes with animated headers and sub-headers. The author is Jon Yablonski, whereas it uses HTML and CSS.
24. Material Design
See the Pen Material Design: Profile Card by Emil Devantie Brockdorff (@Mestika) on CodePen.
It is also perfect when looking for a profile card. It can accommodate a photo, heading, subheading, and content, not forgetting the social media icons. The card also has a box-shadow, and it is web responsive. The author is Emil Devantie Brockdorff, whereas it uses HTML and CSS.
25. Cvcardprofile
See the Pen CvCardProfile by remat (@tamer_aka_remat) on CodePen.
At first, the cards are invisible, and all you can see are three small colorful dots. However, following a hover effect over the dot, the card pops up and displays the information or icon. The author is Remat, whereas it uses HTML and CSS.
26. Fairly Colourful Profile Card
See the Pen Fairly Colourful Profile Card by Takane Ichinose (@takaneichinose) on CodePen.
As the name implies, this CSS card design is perfect for a profile card. It is also important to note that it has a gradient background adding beauty to it. The author is Takane Ichinose, whereas it uses HTML and CSS.
27. Blog Cards
See the Pen Blog Cards by Chyno Deluxe (@ChynoDeluxe) on CodePen.
The name says it all regarding when it is the most suitable CSS card design. It gives your site a modern, classy look thanks to its angled photo edge. The author is Chyno Deluxe and is uses HTML and CSS.
28. Modern CSS Cards Design
See the Pen Modern css cards design by FlorinCornea (@FlorinCornea) on CodePen.
Expect a pair of animated containers and a place to add a link in either. The author is ForinCornea, whereas it uses HTML and CSS.
29. A Simple CSS Card Flip
See the Pen A simple CSS Card Flip by Mandy Thomson (@MandyMadeThis) on CodePen.
How it animates may catch you by surprise because you will most likely be expecting the usual flip. However, that’s far from it, and it is relatively simple. Upon clicking See Tips, the card extends downward to reveal additional content. You can also get rid of the extension once done reading. The author is Mandy Thomson whereas it uses HTML and CSS.
30. Flexbox Exercise #4
See the Pen FlexBox Exercise #4 – Same height cards by Veronica (@veronicadev) on CodePen.
First of all, it is essential to note that the cards usually have the same height initially. However, the card you hover over becomes larger than the rest. It is suitable for a travel or food blog, especially for recipes. The author is Veronica, whereas it uses HTML and CSS.
31. Layout Practice Using Grid
See the Pen Layout practice, using grid by Bart Veneman (@bartveneman) on CodePen.
It is one of the best CSS card designs for blog cards, especially when dealing with the landing page. The car is beautiful yet simple, no doubt. The author is Bart Veneman, and it uses HTML and CSS.
32. News Cards
See the Pen News Cards – CSS only by Aleksandar Čugurović (@choogoor) on CodePen.
If you want CSS cards to display blog posts, this is a great opportunity. The card shows more content upon hovering over it. It will showcase a photo, title, and featured text of the post nicely. The author is Aleksandar Cugurovic, while the code uses HTML and CSS.
33. Material Design –Responsive Card
See the Pen Material Design – Responsive card by David Foliti (@marlenesco) on CodePen.
At a glance, you will see a photo. However, the trick is in locating the hamburger-styled icon on the top right-hand side. Upon clicking on it, expect the card to reveal additional content references regarding the photo. The author is David Foliti, whereas it uses HTML, CSS, and JS.
34. Recipe Card
See the Pen Recipe Card by Ahmad Nasr (@ahmadnasr) on CodePen.
Again, the name says it all, and the card indeed displays recipes perfectly. Therefore, do not hesitate to go for it if you have a food blog. The author is Ahmed Nasr, whereas it uses HTML and CSS.
35. Expand/Collapse Cards With Figure Cut Text
See the Pen Expand/collapse cards with figure cut text by Mikael Ainalem (@ainalem) on CodePen.
These are two cards that expand or collapse once you click on them. It has uniquely shaped vintage labels, and that’s where the content is displayed. The author is Mikael Ainalem, and the code uses HTML and CSS to achieve the animation.
36. CSS Hover Card
See the Pen CSS Hover Card 🛒 by Sowmya Seshadri (@sowmyaseshadri) on CodePen.
It is a great addition to any online store. At first, it shows the image of the product. However, upon hovering over it, it displays the description and cost of that particular item. The author is Sowmya Seshadri, and it uses HTML and CSS to make the transitions happen.
37. CSS Cards
See the Pen CSS Cards by Tristan White (@triss90) on CodePen.
The option offers up to 3 cards. They easily illustrate different levels of services or offers. The author is Tristan White, while the coding uses HTML and CSS.
38. Product Card
See the Pen Product Card by Virgil Pana (@virgilpana) on CodePen.
It has some striking resemblance with the CSS Hover card. For instance, you will see the image of the product. Upon hovering over, it shows the name and price. Upon clicking on View Details, you get other colors. The author is Virgil Pana, whereas it uses HTML. CSS and JS.
39. Daily UI #012 | E-Commerce Shop (Single Item)
See the Pen Daily UI #012 | E-commerce Shop (Single Item) by Julie Park (@juliepark) on CodePen.
If you want to showcase services or products, this is a creative way of doing it. The author of the card design is Julie Park whereas it uses HTML and CSS.
40. Playing Card CSS Grid Ecommerce Layout
See the Pen Playing card CSS Grid eCommerce layout by Andy Barefoot (@andybarefoot) on CodePen.
As its name implies, it is perfect for displaying products on an online marketplace. The card rotates and becomes largest after hovering over it. The author is Andy Barefoot, whereas it uses HTML and CSS.
41. Responsive Skewed Ecommerce CSS Grid
See the Pen Responsive skewed eCommerce CSS Grid by Andy Barefoot (@andybarefoot) on CodePen.
It is also good for an online store, given the unique borders with the name and price, and image on the card. The card is usually slanting, but that changes upon hovering over it.
42. Hover For Product Info
See the Pen Hover For Product Info by Siddharth Hubli (@SRHubli) on CodePen.
Wow! The animation after hovering over this CSS card is impressive and unique. It also shows the name, size, colors, and price of the product. The author is Siddharth Hubil, and it uses HTML and CSS.
43. Geometric Business Card With CSS Grid
See the Pen Geometric business card with CSS Grid by Liz Wendling (@Elwend) on CodePen.
The CSS card design is perfect for a beautiful yet professional business card. The author is Liz Wendling, and it is important to note that it uses HTML and CSS.
44. Deal and Offer Cards Widget
See the Pen Pure CSS cards / Deal and Offer cards widget by Nishant Dogra (@mrdogra007) on CodePen.
It is a set of 3 cards perfect for showing several products and offers on an eCommerce site. The author is Nishant Dogra, whereas the coding is done using HTML and CSS.
45. Environment Impact Cards (GSAP) – CSS Card Designs
See the Pen Environment Impact Cards (GSAP) by saurabh (@saurabhgrewal) on CodePen.
As its name implies, the cards have environmental icons, including gallons of oils, trees cut, and gallons of water used in a certain period. Expect animation upon hovering over it. The author is Anton Mudrenok, whereas it uses HTML, CSS, and JS.