135+ CSS Cards

Last Updated on by in CSS Examples
CSS Cards

In today’s digital landscape, where the presentation of content is the norm, having effective and interactive cards on your website or web application is essential.

CSS cards have emerged in web design to present information in a structured and visually appealing format, making it important to provide a snapshot of specific content.

To help you achieve this, we’ve compiled a curated collection of the most innovative and stylish CSS card designs gathered from reliable platforms such as GitHub and CodePen.

Our latest post, as of January 2024, brings with it immense new possibilities. We’re thrilled to showcase free HTML and CSS card code examples, each crafted to uplift your website’s user experience and overall design aesthetics, making them an effective tool for showcasing various types of information in an organized and visually appealing way.

In this collection, we’ll delve deep into some of the stylish CSS cards available for free on the internet. Each example is not only visually stunning but also involves a blend of creativity and offers a way to organize content into modular blocks, allowing designers and developers to display text, images, links, or buttons in a concise and user-friendly manner.

From creating a simple website and social media feeds to advanced portfolios, dashbaords, or news websites, these CSS cards ensure access to developers most innovative options to present content in unique and visually appealing ways, cater to different design preferences and user experiences, and add a unique flair and interactivity to your content.

Let’s explore our collection and be the ones to effortlessly enhance user interaction without cluttering the main display area.

01. Item Hover Color Background

See the Pen
Item Hover Color Background
by Wikyware Net (@wikyware-net)
on CodePen.


Author: Wikyware Net @wikyware-net
Links: Source Code / Demo
Created on: October 27, 2022
Made with: HTML, CSS

02. Blog Card Grid

See the Pen
Blog Card Grid
by Hannah (@hluebbering)
on CodePen.


Author: Hannah @HLUEBBERING
Links: Source Code / Demo
Created on: February 7, 2023
Made with: HTML, CSS

03. Card UI Skeleton Screen

See the Pen
Card UI Skeleton Screen
by Max Böck (@mxbck)
on CodePen.


Author: Max Böck @mxbck
Links: Source Code / Demo
Created on: August 09,2017
Made with: HTML, CSS(SCSS)

04. Material Design Card – For Blog Post Article

See the Pen
Material Design Card – For Blog Post Article
by Mithicher (@mithicher)
on CodePen.


Author: Mithicher @mithicher
Links: Source Code / Demo
Created on: March 17,2015
Made with: HTML, CSS, JS

05. Backlit Card #CSS

See the Pen
Backlit Card (#CSS)
by Amit Sheen (@amit_sheen)
on CodePen.


Author: Amit Sheen @amit_sheen
Links: Source Code / Demo
Created on: September 14,2021
Made with: HTML, CSS(SCSS)

06. Environment Impact Cards (GSAP)

See the Pen
Environment Impact Cards (GSAP)
by Anton Mudrenok (@mudrenok)
on CodePen.


Author: Anton Mudrenok @mudrenok
Links: Source Code / Demo
Created on: December 22,2016
Made with: HTML, CSS(SCSS), JS(Babel)

07. Card hover effect

See the Pen
Card hover effect
by Aaron Iker (@aaroniker)
on CodePen.


Author: Aaron Iker @aaroniker
Links: Source Code / Demo
Created on: November 18, 2022
Made with: HTML, CSS(SCSS), JS

08. Product Card

See the Pen
Product Card
by Virgil Pana (@virgilpana)
on CodePen.


Author: Virgil Pana @virgilpana
Links: Source Code / Demo
Created on: March 09,2015
Made with: HTML, CSS, JS

09. Remove Elipsis & Reveal

See the Pen
Remove Elipsis & Reveal
by Noah Raskin (@noahraskin)
on CodePen.


Author: Noah Raskin @noahraskin
Links: Source Code / Demo
Created on: September 15,2021
Made with: HTML, CSS(SCSS)

10. Spread cards

See the Pen
Spread cards
by Andrew Canham (@candroo)
on CodePen.


Author: Andrew Canham @candroo
Links: Source Code / Demo
Created on: September 05,2017
Made with: HTML, CSS(Less), JS

11. DRY switch hover card

See the Pen
DRY switch hover card [ Speedy CSS Tips! ⚡️]
by Jhey (@jh3y)
on CodePen.


Author: Jhey @jh3y
Links: Source Code / Demo
Created on: November 4, 2022
Made with: HTML, CSS

12. Material Playing Cards

See the Pen
Material Playing Cards
by Andy Tran (@andytran)
on CodePen.


Author: Andy Tran @andytran
Links: Source Code / Demo
Created on: July 25,2015
Made with: HTML(Pug), CSS(SCSS)

13. Delivery Card Animation

See the Pen
Delivery Card Animation
by Nikolay Talanov (@suez)
on CodePen.


Author: Nikolay Talanov @suez
Links: Source Code / Demo
Created on: August 22,2015
Made with: HTML, CSS(SCSS), JS

14. Simple CSS Card

See the Pen
Card
by Håvard Brynjulfsen (@havardob)
on CodePen.


Author: Håvard Brynjulfsen @havardob
Links: Source Code / Demo
Created on: June 26,2021
Made with: HTML, CSS(SCSS)

15. Material VCard

See the Pen
Material VCard
by Rian Ariona (@ariona)
on CodePen.


Author: Rian Ariona @ariona
Links: Source Code / Demo
Created on: September 16,2015
Made with: HTML, CSS(SCSS), JS

16. Sticky Cards

See the Pen
Sticky Cards
by Chris Coyier (@chriscoyier)
on CodePen.


Author: Chris Coyier @chriscoyier
Links: Source Code / Demo
Created on: October 23, 2022
Made with: HTML(Pug), CSS (SCSS)

17. Clash of Clans Cards

See the Pen
Clash of Clans Cards
by Andre Madarang (@drehimself)
on CodePen.


Author: Andre Madarang @drehimself
Links: Source Code / Demo
Created on: May 19,2016
Made with: HTML, CSS(SCSS), JS

18. Web Material Card Concept

See the Pen
Web Material Card Concept
by Mason Fox (@masonfox)
on CodePen.


Author: Mason Fox @masonfox
Links: Source Code / Demo
Created on: October 22,2015
Made with: HTML(Pug), CSS(SCSS), JS

19. Info CSS Cards

See the Pen
Info Cards
by Nathan Taylor (@nathantaylor)
on CodePen.


Author: Nathan Taylor @nathantaylor
Links: Source Code / Demo
Created on: July 08,2017
Made with: HTML(Pug), CSS(SCSS), JS(Babel)

20. Speedy CSS Hover Card

See the Pen
Speedy CSS Hover Card
by Jhey (@jh3y)
on CodePen.


Author: Jhey @jh3y
Links: Source Code / Demo
Created on: September 7, 2022
Made with: HTML, CSS

21. Stacked CSS Cards with sliding effects

See the Pen
Stacked Cards
by Prasanna Pegu (@prasannapegu)
on CodePen.


Author: Prasanna Pegu @prasannapegu
Links: Source Code / Demo
Created on: June 16,2015
Made with: HTML, CSS(Less), JS

22. Travel Deal Card Hover Rotation Effect

See the Pen
Travel Deal Card Hover Rotation Effect
by P (@petegarvin1)
on CodePen.


Author: P @petegarvin1
Links: Source Code / Demo
Created on: January 30,2021
Made with: HTML, CSS(SCSS)

23. Parallax Depth Cards

See the Pen
Parallax Depth Cards
by Andy Merskin (@andymerskin)
on CodePen.


Author: Andy Merskin @andymerskin
Links: Source Code / Demo
Created on: November 21,2016
Made with: HTML, CSS(SCSS), JS(Babel)

24. Social Cards

See the Pen
Social Cards
by Noah Raskin (@noahraskin)
on CodePen.


Author: Noah Raskin @noahraskin
Links: Source Code / Demo
Created on: June 10, 2021
Made with: HTML, CSS

25. Animated Christmas Card

See the Pen
Animated Christmas Card
by Łukasz Niedźwiecki (@lukasz-niedzwiecki)
on CodePen.


Author: Łukasz Niedźwiecki @lukasz-niedzwiecki
Links: Source Code / Demo
Created on: December 26,2016
Made with: HTML, CSS(Sass), JS

26. Magic Card

See the Pen
Magic Card
by Gayane Gasparyan (@gayane-gasparyan)
on CodePen.


Author: Gayane Gasparyan @gayane-gasparyan
Links: Source Code / Demo
Created on: July 23,2021
Made with: HTML, CSS

27. Glass Card

See the Pen
Glass Card
by Marcello Lopes (@marcell0lopes)
on CodePen.


Author: Marcello Lopes @marcell0lopes
Links: Source Code / Demo
Created on: September 1, 2022
Made with: HTML, CSS

28. Hover CSS card animation

See the Pen
A <figure> with a <figcaption>… and .date that all:hovers
by Joshua Ward (@joshuaward)
on CodePen.


Author: Joshua Ward @joshuaward
Links: Source Code / Demo
Created on: January 17,2019
Made with: HTML(Pug), CSS(SCSS)

29. CSS Card Hover Effects

See the Pen
CSS Card Hover Effects
by Jhonier Riascos Zapata (@Jhonierpc)
on CodePen.


Author: Jhonier Riascos Zapata @Jhonierpc
Links: Source Code / Demo
Created on: September 15,2019
Made with: HTML, CSS

30. Flexbox Cards with Animation

See the Pen
Flexbox Cards with Animation
by AJ Mody (@amody)
on CodePen.


Author: AJ Mody @amody
Links: Source Code / Demo
Created on: May 10,2016
Made with: HTML, CSS(SCSS), JS

31. Profile Card

See the Pen
Profile Card
by Muhammed Erdem (@JavaScriptJunkie)
on CodePen.


Author: Muhammed Erdem @JavaScriptJunkie
Links: Source Code / Demo
Created on: September 23,2018
Made with: HTML, CSS(SCSS), JS

32. Simple Animated Card

See the Pen
Simple Animated Card
by Josh (@jepooley)
on CodePen.


Author: Josh @jepooley
Links: Source Code / Demo
Created on: July 11, 2022
Made with: HTML, CSS(SCSS)

33. Hovers and focus using the has() relational pseudo-class

See the Pen
Hovers and focus using the has() relational pseudo-class
by utilitybend (@utilitybend)
on CodePen.


Author: utilitybend @utilitybend
Links: Source Code / Demo
Created on: August 10, 2022
Made with: HTML, CSS

34. 2017 Card

See the Pen
2017 Card
by Phil (@ph1p)
on CodePen.


Author: Phil @ph1p
Links: Source Code / Demo
Created on: January 22,2017
Made with: HTML, CSS(SCSS), JS(Babel)

35. F1 Player Hexagon Card Responsive

See the Pen
F1 Player Hexagon Card Responsive
by Shireen Taj (@TajShireen)
on CodePen.


Author: Shireen Taj @TajShireen
Links: Source Code / Demo
Created on: May 28, 2021
Made with: HTML, CSS (SCSS)

36. Business Card

See the Pen
Business Card
by Lubos (@mrlubos)
on CodePen.


Author: Lubos @mrlubos
Links: Source Code / Demo
Created on: August 17,2016
Made with: HTML(Haml), CSS(SCSS), JS

37. Expanding flex cards

See the Pen
Expanding flex cards
by Zed Dash (@z-)
on CodePen.

Author: Zed Dash
Links: Source Code / Demo
Created on: September 29,2018
Made with: HTML, CSS(SCSS), JS

38. Card with gradient border and background

See the Pen
Card with gradient border and background
by Aditya Tiwari (@AdityaTiwari)
on CodePen.


Author: Aditya Tiwari @AdityaTiwari
Links: Source Code / Demo
Created on: August 9, 2022
Made with: HTML, CSS(SCSS)

39. Article News Card

See the Pen
Article News Card
by Andy Tran (@andytran)
on CodePen.


Author: Andy Tran @andytran
Links: Source Code / Demo
Created on: May 08,2015
Made with: HTML(Pug), CSS(Less), JS

40. Flying CSS cards tabs

See the Pen
Flying cards tabs
by Biliana (@interstellar)
on CodePen.


Author: Biliana @interstellar
Links: Source Code / Demo
Created on: February 05,2017
Made with: HTML, CSS(SCSS), JS

41. Expandable Animated Card Slider

See the Pen
Expandable Animated Card Slider
by Yudiz Solutions Limited (@yudizsolutions)
on CodePen.


Author: Yudiz Solutions Limited @yudizsolutions
Links: Source Code / Demo
Created on: December 23,2020
Made with: HTML, CSS, JS

42. Movie Card with animation

See the Pen
Week #2 :: Movie Card :: RV Code Challenge
by Alex Fernandez (@LegendAF)
on CodePen.


Author: Alex Fernandez @LegendAF
Links: Source Code / Demo
Created on: October 17,2015
Made with: HTML, CSS(SCSS), JS

43. Pure CSS Responsive animated info card

See the Pen
Pure CSS Responsive animated info card
by Chris Smith (@BlogFire)
on CodePen.


Author: Chris Smith @BlogFire
Links: Source Code / Demo
Created on: June 24, 2022
Made with: HTML, CSS

44. Hearthstone Card CSS 3D Click/Drag

See the Pen
Hearthstone Card CSS 3D Click/Drag
by Jack Rugile (@jackrugile)
on CodePen.


Author: Jack Rugile @jackrugile
Links: Source Code / Demo
Created on: April 26,2016
Made with: HTML, CSS(SCSS), JS

45. OL circle cards

See the Pen
OL circle cards
by Mark Boots (@MarkBoots)
on CodePen.


Author: Mark Boots @MarkBoots
Links: Source Code / Demo
Created on: March 5, 2022
Made with: HTML, CSS

46. Expanding Card Grid With Flexbox

See the Pen
Expanding Card Grid With Flexbox
by Naila Ahmad (@nailaahmad)
on CodePen.


Author: Naila Ahmad @nailaahmad
Links: Source Code / Demo
Created on: December 24,2015
Made with: HTML, CSS(SCSS), JS

47. Animated CSS Card Stacks

See the Pen
Animated Card Stacks
by Chris Hutchinson (@chrishutchinson)
on CodePen.


Author: Chris Hutchinson @chrishutchinson
Links: Source Code / Demo
Created on: May 24,2014
Made with: HTML(Pug), CSS(SCSS), JS

48. Animated Chart CSS Cards

See the Pen
Animated Chart Cards
by Izzy Skye (@chrysokitty)
on CodePen.


Author: Izzy Skye @chrysokitty
Links: Source Code / Demo
Created on: July 23,2015
Made with: HTML, CSS, JS

49. Glassmorphism: Simple Card UI

See the Pen
Glassmorphism: Simple Card UI
by Rahul (@_rahul)
on CodePen.


Author: Rahul @_rahul
Links: Source Code / Demo
Created on: March 28, 2022
Made with: HTML, CSS(SCSS)

50. Futuristic Card Effect

See the Pen
Futuristic Card Effect
by Hyperplexed (@Hyperplexed)
on CodePen.


Author: Hyperplexed
Links: Source Code / Demo
Created on: February 28, 2023
Made with: HTML, CSS

51. Price cards animation

See the Pen
Price cards animation
by Ana Tudor (@thebabydino)
on CodePen.


Author: Ana Tudor @thebabydino
Links: Source Code / Demo
Created on: May 8, 2021
Made with: HTML (Pug), CSS (SCSS)

52. Geometric business card with CSS Grid

See the Pen
Geometric business card with CSS Grid
by Liz Wendling (@Elwend)
on CodePen.


Author: Liz Wendling @Elwend
Links: Source Code / Demo
Created on: March 25,2018
Made with: HTML, CSS(Less)

53. 3D Fold out reveal

See the Pen
3D Fold out reveal
by Andrew Canham (@candroo)
on CodePen.


Author: Andrew Canham @candroo
Links: Source Code / Demo
Created on: November 04,2015
Made with: HTML, CSS(Less), JS

54. Profile Card Hover Effect

See the Pen
Profile Card Hover Effect
by P (@petegarvin1)
on CodePen.


Author: P @petegarvin1
Links: Source Code / Demo
Created on: November 15,2020
Made with: HTML, CSS(Stylus)

55. Business Card and flip effects

See the Pen
Business Card
by Nicholas Dobie (@nrdobie)
on CodePen.


Author: Nicholas Dobie @nrdobie
Links: Source Code / Demo
Created on: July 21,2014
Made with: HTML, CSS(SCSS)

56. Aspect ratio CTA

See the Pen
Aspect ratio CTA
by Michelle Barker (@michellebarker)
on CodePen.


Author: Michelle Barker @michellebarker
Links: Source Code / Demo
Created on: February 8, 2022
Made with: HTML, CSS

57. Mobile Cards

See the Pen
Mobile Cards
by Ettrics (@ettrics)
on CodePen.


Author: Ettrics @ettrics
Links: Source Code / Demo
Created on: May 8,2015
Made with: HTML, CSS(SCSS), JS

58. mini profile

See the Pen
mini profile
by summer (@summercodes)
on CodePen.


Author: summer @summercodes
Links: Source Code / Demo
Created on: May 5, 2021
Made with: HTML, CSS

59. Simple Contact Card

See the Pen
Simple Contact Card
by Max Kurapov (@mkurapov)
on CodePen.


Author: Max Kurapov @mkurapov
Links: Source Code / Demo
Created on: January 24,2016
Made with: HTML, CSS, JS

60. 3D hover plane effect

See the Pen
3D hover plane effect
by Rian Ariona (@ariona)
on CodePen.

Author: Rian Ariona @ariona
Links: Source Code / Demo
Created on: February 14,2015
Made with: HTML, CSS(SCSS), JS

61. CSS Filter Cards

See the Pen
CSS Filter Cards
by Steve Meredith (@steveeeie)
on CodePen.


Author: Steve Meredith @steveeeie
Links: Source Code / Demo
Created on: May 06,2019
Made with: HTML, CSS

62. NFT Card Component

See the Pen
NFT Card Component
by kiberbash (@kiberbash)
on CodePen.


Author: kiberbash @kiberbash
Links: Source Code / Demo
Created on: December 15, 2021
Made with: HTML, CSS (SCSS)

63. Blog Cards

See the Pen
Blog Cards
by Chyno Deluxe (@ChynoDeluxe)
on CodePen.


Author: Chyno Deluxe @ChynoDeluxe
Links: Source Code / Demo
Created on: August 24,2015
Made with: HTML, CSS(SCSS)

64. Animated Weather Cards

See the Pen
Blog Cards
by Chyno Deluxe (@ChynoDeluxe)
on CodePen.


Author: Steve Gardner @ste-vg
Links: Source Code / Demo
Created on: August 22,2016
Made with: HTML, CSS(SCSS), JS

65. CSS Card Hover Interactions

See the Pen
Card Hover Interactions
by Ryan Mulligan (@hexagoncircle)
on CodePen.

Author: Ryan Mulligan @hexagoncircle
Links: Source Code / Demo
Created on: February 06,2020
Made with: HTML(Pug), CSS(SCSS)

66. Sharp & Glowing dark card

See the Pen
Sharp & Glowing dark card | Chrome only
by LukyVJ (@LukyVj)
on CodePen.


Author: LukyVJ @LukyVj
Links: Source Code / Demo
Created on: February 17, 2023
Made with: HTML, CSS(SCSS)

67. Color Palette Trading Cards

See the Pen
Color Palette Trading Cards
by Mike Mangialardi (@mikemang)
on CodePen.


Author: Mike Mangialardi @mikemang
Links: Source Code / Demo
Created on: April 16, 2021
Made with: HTML, CSS (SCSS)

68. Material card opening effect

See the Pen
Material card opening effect
by Luiz Otávio Carvalho (@luizotcarvalho)
on CodePen.


Author: Luiz Otávio Carvalho @luizotcarvalho
Links: Source Code / Demo
Created on: March 15,2015
Made with: HTML(Slim), CSS(SCSS), JS

69. Mentor NFT Preview Card

See the Pen
FE-Mentor NFT Preview Card
by Lorentz (@Laurie312)
on CodePen.


Author: Lorentz @Laurie312
Links: Source Code / Demo
Created on: November 24, 2021
Made with: HTML, CSS

70. Comment Card Animation

See the Pen
Comment Card Animation
by Shaw (@shshaw)
on CodePen.


Author: Shaw @shshaw
Links: Source Code / Demo
Created on: May 14,2016
Made with: HTML, CSS(Less), JS

71. Pricing Card Pure CSS

See the Pen
Pricing – pure css – #16
by Ivan Grozdic (@ig_design)
on CodePen.


Author: Ivan Grozdic @ig_design
Links: Source Code / Demo
Created on: July 11,2020
Made with: HTML, CSS

72. Glass CSS Card

See the Pen
Glass Card
by Benedict (@S_bene)
on CodePen.


Author: Benedict @S_bene
Links: Source Code / Demo
Created on: July 17,2023
Made with: HTML, CSS

73. Card Article UI

See the Pen
Card Article UI
by Mithicher (@mithicher)
on CodePen.


Author: Mithicher @mithicher
Links: Source Code / Demo
Created on: October 27,2015
Made with: HTML, CSS(SCSS)

74. Marvel Corner Box Art

See the Pen
Marvel Corner Box Art
by Aryan Tayal (@aryancodeworm)
on CodePen.


Author: Aryan Tayal @aryancodeworm
Links: Source Code / Demo
Created on: November 13, 2021
Made with: HTML, CSS

75. CSS3 Card Deck Drop Down

See the Pen
CSS3 Card Deck Drop Down
by Brady Sammons (@soulrider911)
on CodePen.


Author: Brady Sammons @soulrider911
Links: Source Code / Demo
Created on: July 23,2013
Made with: HTML, CSS(SCSS), JS

76. Responsive News Card Slider

See the Pen
Responsive News Card Slider
by Muhammed Erdem (@JavaScriptJunkie)
on CodePen.


Author: Muhammed Erdem @JavaScriptJunkie
Links: Source Code / Demo
Created on: September 17,2018
Made with: HTML, CSS( SCSS)

77. Movie Poster Interaction card

See the Pen
Movie Poster Interaction
by Ethan (@pleasedonotdisturb)
on CodePen.


Author: Ethan @pleasedonotdisturb
Links: Source Code / Demo
Created on: June 20,2023
Made with: HTML, CSS

78. 3D Card

See the Pen
3D Card
by Vinder (@VinderOrnitier)
on CodePen.


Author: Vinder @VinderOrnitier
Links: Source Code / Demo
Created on: October 20,2015
Made with: HTML(Pug), CSS(Sass), JS

79. Camila’s card

See the Pen
Camila’s card
by Camila Waz (@camila_waz)
on CodePen.

Author: Camila Waz @camila_waz
Links: Source Code / Demo
Created on: October 21, 2021
Made with: HTML, CSS

80. News Cards – CSS only

See the Pen
News Cards – CSS only
by Aleksandar Čugurović (@choogoor)
on CodePen.


Author: Aleksandar Čugurović @choogoor
Links: Source Code / Demo
Created on: August 14,2016
Made with: HTML, CSS(SCSS)

81. hover expand icon into a button

See the Pen
hover expand icon into a button
by wojtek (@pugson)
on CodePen.


Author: wojtek @pugson
Links: Source Code / Demo
Created on: October 21, 2021
Made with: HTML, CSS(SCSS)

82. Card Hover Interaction

See the Pen
Card Hover Interaction | HTML & CSS
by Sikriti Dakua (@dev_loop)
on CodePen.


Author: Sikriti Dakua @dev_loop
Links: Source Code / Demo
Created on: March 31,2020
Made with: HTML, CSS(SCSS)

83. 3D CSS Card Hover

See the Pen
3D Card Hover
by Gayane Gasparyan (@gayane-gasparyan)
on CodePen.


Author: Gayane Gasparyan @gayane-gasparyan
Links: Source Code / Demo
Created on: January 13,2023
Made with: HTML, CSS

84. Advanced figure card using CSS grid.

See the Pen
Advanced figure card using CSS grid.
by Morten Rand-Hendriksen (@mor10)
on CodePen.


Author: Morten Rand-Hendriksen @mor10
Links: Source Code / Demo
Created on: April 15, 2021
Made with: HTML, CSS

85. Blog Card

See the Pen
Blog Card
by Katherine Kato (@kathykato)
on CodePen.


Author: Katherine Kato @kathykato
Links: Source Code / Demo
Created on: June 08,2018
Made with: HTML, CSS(SCSS), JS(Babel)

86. Keyboard accessible animated card

See the Pen
Keyboard accessible animated card
by Cristian Diaz (@ItsCrisDiaz)
on CodePen.


Author: Cristian Diaz @ItsCrisDiaz
Links: Source Code / Demo
Created on: September 26, 2021
Made with: HTML, CSS

87. Card Flip

See the Pen
Card Flip
by Marcos Paulo (@hellomp)
on CodePen.

Author: Marcos Paulo @hellomp
Links: Source Code / Demo
Created on: January 10,2018
Made with: HTML, CSS, JS

88. 3D Perspective cards with depth [CSS]

See the Pen
3D Perspective cards with depth [CSS]
by Fernando Cohen (@designfenix)
on CodePen.


Author: Fernando Cohen @designfenix
Links: Source Code / Demo
Created on: March 24, 2021
Made with: HTML, CSS (SCSS)

89. Flexbox Cards

See the Pen
Flexbox Cards
by Lindsey (@cssgirl)
on CodePen.


Author: Lindsey @cssgirl
Links: Source Code / Demo
Created on: August 27,2015
Made with: HTML, CSS(SCSS)

90. Profile Card UI

See the Pen
Profile Card UI
by JotForm (@jotform)
on CodePen.


Author: JotForm @jotform
Links: Source Code / Demo
Created on: May 11,2020
Made with: HTML, CSS(SCSS), JS(Babel)

91. CSS Card hover effect

See the Pen
Card hover effect
by Temani Afif (@t_afif)
on CodePen.


Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: January 23,2023
Made with: HTML, CSS

92. Profile Card

See the Pen
Profile Card
by Sanket Bodake (@sanketbodke)
on CodePen.


Author: Sanket Bodake @sanketbodke
Links: Source Code / Demo
Created on: August 22, 2021
Made with: HTML, CSS

93. Cards – BTS on Soompi

See the Pen
#CodePenChallenge – Cards – BTS on Soompi
by Halida Astatin (@halidaa)
on CodePen.


Author: Halida Astatin @halidaa
Links: Source Code / Demo
Created on: June 05,2018
Made with: HTML, CSS, JS

94. Adaptive Frosted Glass

See the Pen
Adaptive Frosted Glass
by Adam Argyle (@argyleink)
on CodePen.


Author: Adam Argyle @argyleink
Links: Source Code / Demo
Created on: August 6, 2021
Made with: HTML, CSS(PostCSS)

95. Digital Business Card

See the Pen
Digital Business Card
by Will Johnson (@willalanjohnson)
on CodePen.


Author: Will Johnson @willalanjohnson
Links: Source Code / Demo
Created on: October 10,2015
Made with: HTML, CSS(SCSS), JS(Babel)

96. Shader Gallery Card

See the Pen
Shader Gallery
by Matthias Hurrle (@atzedent)
on CodePen.


Author: Matthias Hurrle @atzedent
Links: Source Code / Demo
Created on: April 27,2023
Made with: HTML, CSS, JS

97. CSS leaning card effect

See the Pen
CSS leaning card effect
by Lynn Fisher (@lynnandtonic)
on CodePen.


Author: Lynn Fisher @lynnandtonic
Links: Source Code / Demo
Created on: July 13,2020
Made with: HTML, CSS(Stylus)

98. 3D perspective card

See the Pen
3D perspective card XY
by Carlos Sánchez Riballo (@csanchezriballo)
on CodePen.


Author: Carlos Sánchez Riballo @csanchezriballo
Links: Source Code / Demo
Created on: October 16,2015
Made with: HTML(Haml), CSS(SCSS), JS

99. Comment card with a dots background

See the Pen
Comment card with a dots background
by Lucas Fernando (@lucasfernandodev)
on CodePen.


Author: Lucas Fernando @lucasfernandodev
Links: Source Code / Demo
Created on: July 7, 2021
Made with: HTML, CSS

100. CSS Cards Carousel on 3D Cube

See the Pen
Cards Carousel on 3D Cube – CSS Only
by MOZZARELLA (@TheMOZZARELLA)
on CodePen.


Author: mozzarella @TheMOZZARELLA
Links: Source Code / Demo
Created on: March 04,2022
Made with: HTML, CSS

101. Responsive 4 card layout

See the Pen
Responsive 4 card layout
by Ward Larson (@whoiswardlarson)
on CodePen.


Author: Ward Larson @whoiswardlarson
Links: Source Code / Demo
Created on: March 08,2023
Made with: HTML, CSS(Less)

102. CSS-only Slide-up Caption Hover Effect

See the Pen
CSS-only Slide-up Caption Hover Effect
by Mojtaba Seyedi (@seyedi)
on CodePen.


Author: Mojtaba Seyedi @seyedi
Links: Source Code / Demo
Created on: March 13, 2021
Made with: HTML, CSS

103. Flip card memory game

See the Pen
Flip – card memory game.
by Codrin Pavel (@zerospree)
on CodePen.


Author: Codrin Pavel @zerospree
Links: Source Code / Demo
Created on: January 17,2015
Made with: HTML, CSS, JS

104. Sneaker Product Cards

See the Pen
Sneaker Product Cards
by ayush gupta (@ayushgptaa)
on CodePen.


Author: ayush gupta @ayushgptaa
Links: Source Code / Demo
Created on: July 2, 2021
Made with: HTML, CSS

105. MDL horizontal card

See the Pen
MDL horizontal card
by Ruslan (@kybarg)
on CodePen.


Author: Ruslan @kybarg
Links: Source Code / Demo
Created on: July 12,2015
Made with: HTML, CSS(SCSS)

106. 3D CSS card

See the Pen
3D CSS card
by Amit Sheen (@amit_sheen)
on CodePen.


Author: Amit Sheen @amit_sheen
Links: Source Code / Demo
Created on: November 24,2021
Made with: HTML, CSS(SCSS)

107. Card Outer Glow Effect

See the Pen
Card Outer GLow Effect
by quangdao (@lincohn)
on CodePen.


Author: quangdao @lincohn
Links: Source Code / Demo
Created on: September 14,2019
Made with: HTML, CSS

108. Cards Hover Effect

See the Pen
Cards Hover Effect -> HTML & CSS
by Sebi (@DivineBlow)
on CodePen.


Author: Sebi @DivineBlow
Links: Source Code / Demo
Created on: March 9, 2021
Made with: HTML, CSS (SCSS)

109. Gift Card UI

See the Pen
Gift Card UI
by David Khourshid (@davidkpiano)
on CodePen.


Author: David Khourshid @davidkpiano
Links: Source Code / Demo
Created on: May 27,2015
Made with: HTML, CSS(SCSS)

110. Amazing Card Fill Hover Using HTML & CSS

See the Pen
Amazing Card Fill Hover Using HTML & CSS
by Nikhil27bYt (@NikhilBobade)
on CodePen.


Author: Nikhil27bYt @NikhilBobade
Links: Source Code / Demo
Created on: June 17, 2021
Made with: HTML, CSS

111. Card Stack

See the Pen
Card Stack
by Lane Olson (@Lane)
on CodePen.


Author: Lane Olson @Lane
Links: Source Code / Demo
Created on: May 31,2013
Made with: HTML, CSS( Less), JS

112. Zoom CSS Card Image

See the Pen
CodepenChallenge – cpc-card-text
by Chandra Shekhar (@chandrashekhar)
on CodePen.


Author: Chandra Shekhar @chandrashekhar
Links: Source Code / Demo
Created on: November 13,2021
Made with: HTML, CSS(SCSS)

113. Glass Card w/ SVG + GSAP

See the Pen
Glass Card w/ SVG + GSAP (ode to Phil Goodwin @ Unfold)
by Tom Miller (@creativeocean)
on CodePen.


Author: Tom Miller @creativeocean
Links: Source Code / Demo
Created on: December 02,2020
Made with: HTML, CSS, JS

114. Shopping Layout Sample Design

See the Pen
Shopping Layout Sample Design
by Takane Ichinose (@takaneichinose)
on CodePen.


Author: Takane Ichinose @takaneichinose
Links: Source Code / Demo
Created on: June 15, 2021
Made with: HTML, CSS

115. Journalist Flip Card

See the Pen
Journalist Flip Card
by Anders Schmidt Hansen (@andersschmidt)
on CodePen.


Author: Anders Schmidt Hansen @andersschmidt
Links: Source Code / Demo
Created on: August 15,2013
Made with: HTML(Slim), CSS(Less)

116. CSS Card

See the Pen
Untitled
by Henrik Fricke (@HenrikFricke)
on CodePen.


Author: Henrik Fricke @HenrikFricke
Links: Source Code / Demo
Created on: February 25, 2021
Made with: HTML(Pug), CSS (SCSS)

117. Expanding card page transition effect

See the Pen
Expanding card page transition effect
by Rachel Smith (@rachsmith)
on CodePen.


Author: Rachel Smith @rachsmith
Links: Source Code / Demo
Created on: February 10,2017
Made with: HTML, CSS, JS

118. CSS Card

See the Pen
2021
by Pieter Biesemans (@pieter-biesemans)
on CodePen.


Author: Pieter Biesemans @pieter-biesemans
Links: Source Code / Demo
Created on: January 4, 2021
Made with: HTML, CSS(SCSS)

119. CSS Card Text with toggle

See the Pen
Card Text Challenge with toggle
by Daphné (@DfnRv)
on CodePen.


Author: Daphné @DfnRv
Links: Source Code / Demo
Created on: November 13,2021
Made with: HTML, CSS, JS

120. Responsive Image Effects with CSS Gradients and aspect-ratio

See the Pen
Responsive Image Effects with CSS Gradients and aspect-ratio
by Smashing Magazine (@smashingmag)
on CodePen.


Author: Smashing Magazine @smashingmag
Links: Source Code / Demo
Created on: February 20, 2021
Made with: HTML, CSS (SCSS)

121. Bootstrap cards tutorial

See the Pen
Bootstrap cards tutorial
by Alex Devero (@alexdevero)
on CodePen.


Author: Alex Devero @alexdevero
Links: Source Code / Demo
Created on: October 23,2015
Made with: HTML, CSS(SCSS)

122. Product Card UI Hover Floating

See the Pen
Product Card UI Hover Floating
by Katy Wellington (@katywellington91)
on CodePen.


Author: Katy Wellington @katywellington91
Links: Source Code / Demo
Created on: January 18, 2021
Made with: HTML, CSS

123. Isometric Card Grid

See the Pen
Isometric Card Grid
by Jon Kantner (@jkantner)
on CodePen.


Author: Jon Kantner @jkantner
Links: Source Code / Demo
Created on: January 27,2018
Made with: HTML(Pug), CSS, JS

124. CSS Card Text

See the Pen
Card Text challenge
by Temani Afif (@t_afif)
on CodePen.


Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: November 10,2021
Made with: HTML, CSS

125. Parallax Tilt Effect Cards

See the Pen
Parallax Tilt Effect Cards
by Abubaker Saeed (@AbubakerSaeed)
on CodePen.


Author: Abubaker Saeed @AbubakerSaeed
Links: Source Code / Demo
Created on: November 06,2019
Made with: HTML, CSS

126. Drag and drop CSS cards

See the Pen
Drag-and-drop cards
by Graham Marlow (@mgmarlow)
on CodePen.


Author: Graham Marlow @mgmarlow
Links: Source Code / Demo
Created on: February 05,2016
Made with: HTML, CSS, JS(Babel)

127. Responsive Digital Business Card

See the Pen
Responsive Digital Business Card
by fabian wohlgemuth (@wohfab)
on CodePen.


Author: fabian wohlgemuth @wohfab
Links: Source Code / Demo
Created on: February 6, 2021
Made with: HTML, CSS, JS

128. 3D Cards Flip

See the Pen
3D Cards Flip
by Julien Sulpis (@jsulpis)
on CodePen.


Author: Julien Sulpis @jsulpis
Links: Source Code / Demo
Created on: February 8, 2023
Made with: HTML, CSS(SCSS)

129. Card

See the Pen
CARD
by Pratham (@prathkum)
on CodePen.


Author: Pratham @prathkum
Links: Source Code / Demo
Created on: January 29, 2021
Made with: HTML, CSS

130. Card Text

See the Pen
Card Text
by Bruce Brotherton (@brucebrotherton)
on CodePen.


Author: Bruce Brotherton @brucebrotherton
Links: Source Code / Demo
Created on: November 09,2021
Made with: HTML, CSS

131. Blog Card UI

See the Pen
Blog Card fun #1
by IMarty (@IMarty)
on CodePen.


Author: IMarty @IMarty
Links: Source Code / Demo
Created on: January 13,2016
Made with: HTML(Pug), CSS(Sass)

132. Glassmorphism UI Card

See the Pen
Glassmorphism UI Card
by Coding Artist (@Coding-Artist)
on CodePen.


Author: Coding Artist @Coding-Artist
Links: Source Code / Demo
Created on: December 18, 2020
Made with: HTML, CSS

133. Material Design: Profile Card

See the Pen
Material Design: Profile Card
by Emil Devantie Brockdorff (@Mestika)
on CodePen.


Author: Emil Devantie Brockdorff @Mestika
Links: Source Code / Demo
Created on: January 15,2016
Made with: HTML, CSS

134. product card

See the Pen
product card
by Arti Bhandari (@arti2002)
on CodePen.


Author: Arti Bhandari @arti2002
Links: Source Code / Demo
Created on: December 13, 2020
Made with: HTML, CSS

135. 3D Flexbox flippable card with shiny!

See the Pen
3d flexbox flippable card with shiny!
by Adam Crockett (@acronamy)
on CodePen.


Author: Adam Crockett @acronamy
Links: Source Code / Demo
Created on: August 03,2016
Made with: HTML(Pug), CSS(Stylus), JS(Babel)

136. Step Tracker Card

See the Pen
Step Tracker Card
by Alvaro Montoro (@alvaromontoro)
on CodePen.


Author: Alvaro Montoro @alvaromontoro
Links: Source Code / Demo
Created on: November 05,2021
Made with: HTML, CSS(SCSS), JS

137. CSS Glassmorphism Card Hover Effects

See the Pen
CSS Glassmorphism Card Hover Effects
by Luisoms (@luisoms)
on CodePen.


Author: Luisoms @luisoms
Links: Source Code / Demo
Created on: December 10, 2020
Made with: HTML, CSS(SCSS)

 

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.