Welcome to our site, If you are seeking a CSS Business Cards collection that displays contact details and professional information in a modern and engaging way on web sites and apps. You’re in luck!
In this compilation, we are featuring free HTML and CSS code examples that showcase latest business cards with eye-catching and responsive UI. These examples have been sourced from reputed platforms such as CodePen, GitHub, and other reliable sites.
CSS Business Cards are digital cards for showing contact details and professional information, offering an innovative and creative way to present information in a visually appealing, engaging, and unique manner. Our collection demonstrates a wide range of design styles, including animated business cards, giving a more realistic, subtle and effective experience than old traditional business cards to display someone’s professional skills.
Business cards have been in trend for ages, and CSS business cards are the advanced and more compact version of traditional business cards. With our wide selection of UI business card designs, you can exchange your contact details online, and ensures quick access to your professional presence.
These digital cards are easily shared online through websites or social media, providing a modern way to share contact details. They not only provide a visually appealing way to display professional information but also offer a simple way to create engaging and interactive user experiences on your website or application.
Whether you’re a entrepreneur, small business’ owner, freelancer, consultant, or corporate executive, with our unique and most innovative CSS digital business cards, you can cater to a wide range of professionals seeking a more convenient, environmentally friendly, and modern way to share contact information and promote their services or skills.
Let’s delve into and discover the potential for crafting remarkable, adaptable business cards that offer immersive user experiences.
01. Business Card
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)
02. Business Card /r/web_design — Ciclop
See the Pen
Business Card /r/web_design — Ciclop by Eduard Kosicky (@heyitsedward)
on CodePen.
Author: Eduard Kosicky @heyitsedward
Links: Source Code / Demo
Created on: July 29, 2014
Made with: HTML, CSS(SCSS)
03. 3D flip business card
See the Pen
3D flip business card by Elena Nazarova (@nazarelen)
on CodePen.
Author: Elena Nazarova @nazarelen
Links: Source Code / Demo
Created on: August 22, 2016
Made with: HTML, CSS
04. Animated Business Card
See the Pen
Animated Business Card by Laura Pinto (@lauraalpinto)
on CodePen.
Author: Laura Pinto @lauraalpinto
Links: Source Code / Demo
Created on: February 19, 2019
Made with: HTML, CSS(SCSS)
05. My Flippable Digital Business Card
See the Pen
My Flippable Digital Business Card by Peter Girnus (@Gothburz)
on CodePen.
Author: Peter Girnus @Gothburz
Links: Source Code / Demo
Created on: October 27, 2015
Made with: HTML, CSS(SCSS)
06. Business Card
See the Pen
Business card by Rick (@iPhyse)
on CodePen.
Author: Rick @iPhyse
Links: Source Code / Demo
Created on: September 23, 2019
Made with: HTML, CSS(SCSS)
07. 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)
08. Material Business Card
See the Pen
Material Business Card by Thomas Wang (@thomaswang)
on CodePen.
Author: Thomas Wang @thomaswang
Links: Source Code / Demo
Created on: March 11, 2018
Made with: HTML, CSS , JS
09. Amon WindReaver
See the Pen
Amon WindReaver by Binary (@VoidBoy)
on CodePen.
Author: Binary @VoidBoy
Links: Source Code / Demo
Created on: June 23, 2015
Made with: HTML, CSS
10. One Punch Man – Business Card
See the Pen
One Punch Man – Business Card by wheatley (@wheately)
on CodePen.
Author: wheatley @wheately
Links: Source Code / Demo
Created on: January 23, 2019
Made with: HTML, CSS(SCSS)
11. CSS Business Card
See the Pen
CSS Business Card by Thomas Hanson (@swellfoop)
on CodePen.
Author: Thomas Hanson @swellfoop
Links: Source Code / Demo
Created on: September 10, 2018
Made with: HTML, CSS
12. Card with CSS
See the Pen
Card with CSS by Saeed Hassanvand (@Hassanvand)
on CodePen.
Author: Saeed Hassanvand @Hassanvand
Links: Source Code / Demo
Created on: October 8, 2019
Made with: HTML, CSS
13. Business Card
See the Pen
Business card by Zach Saucier (@ZachSaucier)
on CodePen.
Author: Zach Saucier @ZachSaucier
Links: Source Code / Demo
Created on: April 11, 2015
Made with: HTML, CSS(SCSS)
14. Inspiration Card
See the Pen
Inspiration Card by Dannie Vinther (@dannievinther)
on CodePen.
Author: Dannie Vinther @dannievinther
Links: Source Code / Demo
Created on: September 19, 2017
Made with: HTML, CSS
15. Flipping Business Card
See the Pen
Flipping Business Card by Sabine Robart (@_Sabine)
on CodePen.
Author: Sabine Robart @_Sabine
Links: Source Code / Demo
Created on: October 31, 2018
Made with: HTML, CSS(SCSS)
16. HTML Business Card
See the Pen
HTML Business Card by Margus Lillemägi (@VisualAngle)
on CodePen.
Author: Margus Lillemägi @VisualAngle
Links: Source Code / Demo
Created on: December 2, 2017
Made with: HTML, CSS
17. Materialize Styled Business Card Demo
See the Pen
Materialize Styled Business Card Demo by Joshua T (@joshuatz)
on CodePen.
Author: Joshua T @joshuatz
Links: Source Code / Demo
Created on: December 13, 2018
Made with: HTML, CSS
18. Business Card
See the Pen
Business Cards by Sven Flickinger (@naeramarth7)
on CodePen.
Author: Sven Flickinger @naeramarth7
Links: Source Code / Demo
Created on: August 4, 2013
Made with: HTML, CSS
19. Hover-effect-card
See the Pen
Hover-effect-card by Kesavaraj (@kesavaraj)
on CodePen.
Author: Kesavaraj @kesavaraj
Links: Source Code / Demo
Created on: November 10, 2019
Made with: HTML, CSS
20. Business Card
See the Pen
Business Card by Alex K (@alexk)
on CodePen.
Author: Alex K @alexk
Links: Source Code / Demo
Created on: September 28, 2015
Made with: HTML, CSS
21. CSS Grid Business Card
See the Pen
CSS Grid : Business Card by Siddharth Hubli (@SRHubli)
on CodePen.
Author: Siddharth Hubli @SRHubli
Links: Source Code / Demo
Created on: July 31, 2018
Made with: HTML, CSS
22. Google Business Card
See the Pen
Google Business Card by Arbaoui Mehdi (@arbaoui_mehdi)
on CodePen.
Author: Arbaoui Mehdi @arbaoui_mehdi
Links: Source Code / Demo
Created on: January 26, 2013
Made with: HTML, CSS , JS
23. Business Cards
See the Pen
“Business Cards” by Marc Ferrold (@Ossome)
on CodePen.
Author: Marc Ferrold @Ossome
Links: Source Code / Demo
Created on: January 9, 2018
Made with: HTML, CSS (SCSS)
24. Google Business Card
See the Pen
Google Business Card by Arbaoui Mehdi (@arbaoui_mehdi)
on CodePen.
Author: Arbaoui Mehdi @arbaoui_mehdi
Links: Source Code / Demo
Created on: January 26, 2013
Made with: HTML, CSS , JS
25. Business Card
See the Pen
Business Card by Ian Chen (@ianchen0419)
on CodePen.
Author: Ian Chen @ianchen0419
Links: Source Code / Demo
Created on: September 11, 2016
Made with: HTML, CSS
26. CSS Business Card
See the Pen
CSS Business Card by Keith Pickering (@keithpickering)
on CodePen.
Author: Keith Pickering @keithpickering
Links: Source Code / Demo
Created on: February 1, 2015
Made with: HTML, CSS(SCSS), JS
27. Business Card
See the Pen
Business Card by Alex (@alexanderkwright)
on CodePen.
Author: Alex @alexanderkwright
Links: Source Code / Demo
Created on: December 2, 2014
Made with: HTML, CSS(SCSS)
28. Business Card
See the Pen
Business Card by Jonathan Ostrander (@OstrichProjects)
on CodePen.
Author: Jonathan Ostrander @OstrichProjects
Links: Source Code / Demo
Created on: July 22, 2014
Made with: HTML, CSS
29. CSS Business Card
See the Pen
Business Card by Vishnu (@vishnum)
on CodePen.
Author: Vishnu @vishnum
Links: Source Code / Demo
Created on: July 24, 2014
Made with: HTML, CSS
30. Web business card
See the Pen
My ID | Web business card by VoidedVixen (@VoidedVixen)
on CodePen.
Author: VoidedVixen @VoidedVixen
Links: Source Code / Demo
Created on: August 6, 2017
Made with: HTML, CSS
31. Flipping Business Card
See the Pen
Flipping Business Card by Joshua Ward (@joshuaward)
on CodePen.
Author: Joshua Ward @joshuaward
Links: Source Code / Demo
Created on: April 3, 2019
Made with: HTML(Pug) ,CSS (SCSS)
32. Business card
See the Pen
Business card by Akshay (@akshaycodes)
on CodePen.
Author: Akshay @akshaycodes
Links: Source Code / Demo
Created on: October 11, 2018
Made with: HTML (Pug),CSS (Sass)
33. Business card
See the Pen
Business card by Gigi (@gigiyeh)
on CodePen.
Author: Gigi @gigiyeh
Links: Source Code / Demo
Created on: November 13, 2016
Made with: HTML(Pug), CSS (Sass)
34. CSS Business Card
See the Pen
CSS Business Card by jasper (@jboeijenga)
on CodePen.
Author: jasper @jboeijenga
Links: Source Code / Demo
Created on: September 4, 2014
Made with: HTML, CSS,JS
35. 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
36. Flippable CSS3 Business Card
See the Pen
Flippable CSS3 Business Card by Mark Murray (@markmurray)
on CodePen.
Author: Mark Murray @markmurray
Links: Source Code / Demo
Created on: January 2, 2014
Made with: HTML (Haml), CSS (SCSS)
37. The sea of colors (pure CSS)
See the Pen
The sea of colors (pure CSS) by Irem Lopsum (@iremlopsum)
on CodePen.
Author: Irem Lopsum @iremlopsum
Links: Source Code / Demo
Created on: August 3, 2014
Made with: HTML, CSS
38. Business Card
See the Pen
Business Card by Greg Hayes (@thegodshatetexas)
on CodePen.
Author: Greg Hayes @thegodshatetexas
Links: Source Code / Demo
Created on: July 29, 2014
Made with: HTML, CSS (SCSS)
39. 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 3, 2016
Made with: HTML(Pug), CSS (Stylus), JS (Babel)
40. UI Business Card
See the Pen
UI Business Card by Alex Tkachev (@alexpopovich)
on CodePen.
Author: Alex Tkachev @alexpopovich
Links: Source Code / Demo
Created on: March 4, 2017
Made with: HTML, CSS (SCSS)
41. 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