40+ CSS Business Cards

Last Updated on by in CSS Examples
CSS Business Card

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

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.