30+ Impressive CSS Business Cards (Free Code + Demos)

Enjoy this 100% free and open source collection of HTML and CSS business card code examples. These CSS business cards totally impress people!

NEW 🔥 Auto-Apply to 100's of Jobs With AI 🔥

👉 Click to visit: ApplyFox.ai

1. Animated CSS Business Card

CSS Business Cards - Animated CSS Business Card

Author: Laura Pinto (lauraalpinto)

Links: Source Code / Demo

Created on: January 18, 2019

Made with: HTML, SCSS

Tags: business-card, portfolio, scss, animation

2. CSS Grid : Business Card

CSS Business Cards - CSS Grid : Business Card

Experimenting with Css Grid and with its properties. Created the Business Card template using Css Grid which I found here: https://www.behance.net/gallery/27133319/Material-Business-Card-Template-(Freebie) Icons made by: www.freepik.com

Author: Siddharth Hubli (SRHubli)

Links: Source Code / Demo, Behance Page

Created on: July 31, 2018

Made with: HTML, CSS, JS

Tags: css-grid, business-card, html-and-css, material design

3. Geometric Business Card With CSS Grid

CSS Business Cards - Geometric business card with CSS Grid

Playing around with css grid, flexbox, clip-path, and radial-gradient Recreating the business card template as found here: https://novadonna.me/product/business-card-template-designs-pop-geometric/

Author: Liz Wendling (Elwend)

Links: Source Code / Demo, Novadonna.me

Created on: March 24, 2018

Made with: HTML, Less, JS

Tags: css-grid, flexbox, card

4. Flipping CSS Business Card

CSS Business Cards - Flipping CSS Business Card

100dayscss #034 Fipping Business Card Interactive card design with text clip-mask + background-clip linear-gradient animation.

Author: Sabine Robart (Artemis1)

Links: Source Code / Demo

Created on: October 31, 2018

Made with: HTML, SCSS, JS

Tags: background-clip, linear-gradient, design, card, interactive

5. One Punch Man - CSS Business Card

CSS Business Cards - One Punch Man - CSS Business Card

Experimenting with Css Grid and with its properties. Created the Business Card template using Css Grid which I found here: https://www.behance.net/gallery/27133319/Material-Business-Card-Template-(Freebie) Icons made by: www.freepik.com

Author: Siddharth Hubli (SRHubli)

Links: Source Code / Demo

Created on: July 31, 2018

Made with: HTML, CSS, JS

Tags: css-grid, business-card, html-and-css, material design

6. CSS Business Card

Quick business card design that I decided to print Patrick Bateman's credentials on. 100% CSS3, with the :hover and :focus styles of the button element being used to allow for a smooth two-stage animation.

Author: Thomas Hanson (swellfoop)

Links: Source Code / Demo

Created on: September 10, 2018

Made with: HTML, CSS

Tags: css, animation, business-card, isometric, 3d

7. Black CSS Business Card

CSS Business Cards - Black CSS Business Card

This pen is sketch for a digital business card

Author: jasper (jboeijenga)

Links: Source Code / Demo

Created on: September 4, 2014

Made with: HTML, CSS, JS

Tags: css, animation, 3d, flipping-card

8. Business Card

Author: Gigi (gigiyeh)

Links: Source Code / Demo

Created on: November 12, 2016

Made with: Pug, Sass

CSS Pre-processor: Sass

JS Pre-processor: None

HTML Pre-processor: Pug

9. Inspiration Card

Author: Dannie Vinther (dannievinther)

Links: Source Code / Demo

Created on: September 18, 2017

Made with: HTML, CSS

Tags: card, announcement

10. Dark Business Card

About: This is an online version of my business card. Feel free to suggest improvements. Contribution & Suggestions You can usually reach me on Twitter. Want to build cool stuff? I am always looking forward to meeting new people. If you want to work with me or just want to connect, me...

Read More

Author: Lubos (mrlubos)

Links: Source Code / Demo

Created on: August 16, 2016

Made with: Haml, SCSS, JS

CSS Pre-processor: SCSS

JS Pre-processor: None

HTML Pre-processor: Haml

Tags: business, card, html, css, javascript

11. 3D Flip Business Card

CSS Business Cards - 3D flip business card

gradient pattern based on pattern by Kakha Kakhadzen https://dribbble.com/shots/2908379-Pattern-for-Business-Cards

Author: Elena Nazarova (nazarelen)

Links: Source Code / Demo, Dribbble.com

Created on: August 22, 2016

Made with: HTML, CSS

12. My Flippable Digital Business Card

CSS Business Cards - My Flippable Digital Business Card

My flippable online business card! Be sure to check out the social links on the back they have a neat fill effect too. If you follow me I do follow back. Enjoy! :D

Author: Peter Girnus (Gothburz)

Links: Source Code / Demo

Created on: October 27, 2015

Made with: HTML, SCSS

Tags: business-card, social-icons, css, flippable, minimal

13. Business Card Design - Reddit

CSS Business Cards - Business Card Design - Reddit

A business card concept I created for a little challenge over at http://reddit.com/r/web_design!

Author: Eduard Kosicky (heyitsedward)

Links: Source Code / Demo, Reddit.com

Created on: July 28, 2014

Made with: HTML, SCSS

Tags: flat, card, css, minimal

14. CSS Business Card

This pen is sketch for a digital business card

Author: jasper (jboeijenga)

Links: Source Code / Demo

Created on: September 4, 2014

Made with: HTML, CSS, JS

Tags: css, animation, 3d, flipping-card

15. Business Card

One of my ideas for a business card that I may make into a real business card.

Author: Zach Saucier (ZachSaucier)

Links: Source Code / Demo

Created on: April 10, 2015

Made with: HTML, SCSS, JS

Tags: css, card, business-card

16. Interactive, Pure CSS Business Card

CSS Business Cards - Interactive, Pure CSS Business Card

I've gone way too far, I guess. This is a submission for the /r/web_design subreddit challenge. An interactive business card. There are no JavaScript involved (except the stupid Typekit font-loading JS) and no arbitrary loading to image files (everything is handled in SVGs). Why is it cl...

Read More

Author: Tyler Godfrey (TGAmpersand)

Links: Source Code / Demo

Created on: August 3, 2014

Made with: HTML, SCSS, JS

Tags: business-card, interactive, css-only, animations, showcase

17. Css Business Card

Author: amine (aminejafur)

Links: Source Code / Demo

Created on: January 30, 2018

Made with: HTML, Less

18. Materialize Styled Business Card Demo

CSS Business Cards - Materialize Styled Business Card Demo

A quick MaterializeCSS styled business card I threw together for my portfolio site. You can easily replace the Base64 image with the profile image of your choosing. Also, for fun I experimented with a way to allow the use of either Font-Awesome or Materialize for certain icons - I used som...

Read More

Author: Joshua T (joshuatz)

Links: Source Code / Demo

Created on: December 12, 2018

Made with: HTML, CSS

Tags: materializecss, materialize, business-card, google material, portfolio