Create Business Card Template with HTML & CSS

Faraz

By Faraz -

Learn how to make a modern business card using HTML and CSS. Simple steps, clean design, and no complex code.

Join us on Telegram
create-business-card-template-with-html-and-css.webp
Read Alsohtml-bank-account-opening-form.webpHTML Bank Account Opening Form | With CSS & JavaScript

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. Conclusion
  5. Preview

Want to create a stylish business card for your portfolio, personal brand, or client project? With just HTML and CSS, you can design a clean and modern business card template that works on all screens.

This guide is great for beginners who want to learn how to build something professional with less code and clear structure.

Prerequisites

Before we begin, you’ll need:

  • Basic knowledge of HTML and CSS
  • A code editor like VS Code
  • A web browser (Chrome, Edge, etc.)

Source Code

Step 1 (HTML Code):

To get started, we first need to create a basic HTML file. In this file, we will include the main structure for our business card template. Lets break down the HTML code step by step:

1. <!DOCTYPE html> Declaration

<!DOCTYPE html>
  • Declares the document type and version of HTML.
  • Ensures proper rendering in modern browsers.

2. <html> Tag with Language

<html lang="en">
  • Sets the language of the document to English.
  • Helps search engines and screen readers.

3. <head> Section

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Glassmorphism Business Card</title>
  <link rel="stylesheet" href="styles.css">
  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;600;700&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
  • Sets metadata like character encoding and mobile responsiveness.
  • Sets the page title.
  • Links external styles (styles.css), Google Fonts (Manrope, Space Grotesk), and Font Awesome icons.

4. <body> Section Starts

<body>
  <div class="card-wrapper">
    ...
  </div>
</body>
  • The main content is inside a div with the class card-wrapper.

5. Background Decorations

<div class="bg-blur"></div>
<div class="bg-circle c1"></div>
<div class="bg-circle c2"></div>
<div class="bg-circle c3"></div>
  • Visual animated elements for background decoration.
  • Blurred colorful circles used to create a modern glassmorphism effect.

6. Business Card Container

<div class="business-card">
  ...
</div>
  • Main business card box.
  • Includes glow, profile, contact info, and social links.

7. Card Glow Effect

<div class="card-glow"></div>
  • Adds a glowing border/shadow around the card.

8. Card Content Section

<div class="card-content">
  ...
</div>
  • Contains all visible content inside the card (profile, contact, social).

9. Profile Section

<div class="profile-section">
  <div class="avatar-container">
    <div class="avatar-glow"></div>
    <div class="avatar">
      <svg>...</svg>
    </div>
  </div>
  <div class="profile-info">
    <h1 class="name">Sophia <span>Chen</span></h1>
    <div class="title">Digital Product Designer</div>
    <div class="company">@NeonLabs</div>
  </div>
</div>
  • Avatar with a glowing effect and SVG illustration.
  • Profile info:
    • Name: Sophia Chen
    • Job Title: Digital Product Designer
    • Company: @NeonLabs

10. Contact Section

<div class="contact-section">
  <div class="contact-row">
    ...
  </div>
  <div class="contact-row">
    ...
  </div>
</div>
  • First row:
  • Second row:
    • Website: neonlabs.design
    • Location: San Francisco, CA
  • Each item has an associated Font Awesome icon.

11. Social Links and QR Code

<div class="social-section">
  <div class="social-links">
    <a href="#" class="social-btn twitter"><i class="fab fa-twitter"></i></a>
    <a href="#" class="social-btn dribbble"><i class="fab fa-dribbble"></i></a>
    <a href="#" class="social-btn linkedin"><i class="fab fa-linkedin-in"></i></a>
    <a href="#" class="social-btn behance"><i class="fab fa-behance"></i></a>
  </div>
  <div class="qr-code">
    <div class="qr-pattern"></div>
  </div>
</div>
  • Four social buttons:
  • Twitter, Dribbble, LinkedIn, Behance
  • QR Code placeholder (for scan-to-contact or vCard, styled via .qr-pattern)

12. Decorative Lines and Dots

<div class="deco-line l1"></div>
<div class="deco-line l2"></div>
<div class="deco-dot d1"></div>
<div class="deco-dot d2"></div>
  • Additional visual elements for polish:
  • Lines and dots enhance the futuristic/glassy design.
Read Alsocreate a gooey effect loader with html and css.jpgGooey Effect Loader using HTML CSS

Step 2 (CSS Code):

Once the basic HTML structure of the business card is in place, the next step is to add styling to the card using CSS. Lets break down the CSS code step by step:

1. Root Variables (:root)

:root {
  --primary: #6c5ce7;
  --secondary: #a29bfe;
  --accent: #fd79a8;
  --dark: #2d3436;
  --light: #f5f6fa;
  --glass: rgba(255, 255, 255, 0.15);
  --glass-border: rgba(255, 255, 255, 0.25);
  --glass-highlight: rgba(255, 255, 255, 0.4);
}
  • Defines custom CSS variables for consistent theme colors.
  • Used throughout the design for glass effect, text, background, etc.

2. Base Styles

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Manrope', sans-serif;
  background: linear-gradient(135deg, #2d3436 0%, #000000 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  color: var(--light);
  overflow: hidden;
}
a {
  text-decoration: none;
}
  • Resets default margins and paddings.
  • Uses flex to center the card.
  • Adds a dark gradient background and smooth fonts.
  • Disables overflow to hide scrollbars.
  • Removes underline from links.

3. Animated Background Elements

.bg-blur, .bg-circle {
  position: fixed;
  z-index: -1;
  filter: blur(...);
  animation: float ...;
}
  • Creates soft glowing background blobs.
  • Animated using @keyframes float to move and rotate slowly.
  • Each .bg-circle has a different size, position, color, and delay.

4. @keyframes float

@keyframes float {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(20px, 20px) rotate(5deg); }
  100% { transform: translate(-20px, -20px) rotate(-5deg); }
}
  • Animates background elements with floating motion.
  • Gives an organic, fluid feel.

5. Card Wrapper and Business Card

.card-wrapper {
  perspective: 1000px;
}
.business-card {
  background: var(--glass);
  backdrop-filter: blur(15px);
  border: 1px solid var(--glass-border);
  border-radius: 25px;
  box-shadow: ...;
}
  • .card-wrapper gives a 3D perspective.
  • .business-card creates the glass effect using transparency and blur.
  • Rounded corners and shadows give it depth.

6. Card Glow Effect

.card-glow {
  position: absolute;
  background: radial-gradient(...);
  animation: rotate-glow 20s infinite linear;
}
  • Adds a glowing background that rotates continuously.

7. @keyframes rotate-glow

@keyframes rotate-glow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
  • Smoothly spins the glow for a dynamic halo effect.

8. Card Content Layout

.card-content {
  display: flex;
  flex-direction: column;
  padding: 40px;
}
  • Vertical stacking of content blocks.

9. Profile Section

.profile-section {
  display: flex;
  align-items: center;
}
.avatar-glow {
  animation: pulse 4s infinite alternate;
}
.avatar {
  border-radius: 50%;
  background: var(--glass);
  border: 2px solid var(--glass-highlight);
}
  • Avatar image has a pulsing glow.
  • Uses SVG for a clean avatar inside a glass circle.

10. @keyframes pulse

@keyframes pulse {
  0% { transform: scale(0.95); opacity: 0.3; }
  100% { transform: scale(1.05); opacity: 0.6; }
}
  • Creates a breathing effect around the avatar.

11. Name & Title Styling

.name {
  font-family: 'Space Grotesk';
  font-size: 2.2rem;
}
.name span::after {
  content: '';
  background: currentColor;
}
  • Highlights the name using a stylish font and underline effect.
  • Job title and company use lighter weights and secondary colors.

12. Contact Information

.contact-section {
  margin-bottom: 40px;
}
.contact-item {
  display: flex;
  background: var(--glass);
  padding: 12px 15px;
  border-radius: 12px;
  transition: all 0.3s ease;
}
.contact-item:hover {
  transform: translateY(-3px);
}
  • Two rows of contact info styled as glass cards.
  • Icons (email, phone, website, location) are accented.
  • Slight lift on hover for interactivity.

13. Social Section

.social-btn {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  background: var(--glass);
}
.social-btn::before {
  background: linear-gradient(...);
  transition: 0.5s;
}
  • Buttons with hover effects: glow and lift.
  • Each social media brand gets its own color on hover.

14. QR Code Styling

.qr-code {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  background: var(--glass);
}
.qr-pattern {
  background: linear-gradient(...);
  opacity: 0.5;
}
  • A square placeholder for a stylized QR code.
  • Background uses repeated diagonal patterns.

15. Decorative Lines & Dots

.deco-line, .deco-dot {
  position: absolute;
}
.deco-dot {
  border-radius: 50%;
  box-shadow: 0 0 15px var(--accent);
}
  • Adds lines and glowing dots around the card for detail.
  • Lines are rotated to appear dynamic.

16. Responsive Design (Media Queries)

Tablet (max-width: 768px)

@media (max-width: 768px) {
  .profile-section { flex-direction: column; }
  .contact-row { flex-direction: column; }
}
  • Profile and contact sections stack vertically.
  • Spacing and sizes adjust for tablets.

Mobile (max-width: 480px)

@media (max-width: 480px) {
  .name { font-size: 1.5rem; }
  .contact-item { font-size: 0.9rem; }
}
  • Reduces padding and font sizes for mobile screens.
:root {
  --primary: #6c5ce7;
  --secondary: #a29bfe;
  --accent: #fd79a8;
  --dark: #2d3436;
  --light: #f5f6fa;
  --glass: rgba(255, 255, 255, 0.15);
  --glass-border: rgba(255, 255, 255, 0.25);
  --glass-highlight: rgba(255, 255, 255, 0.4);
}

/* Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Manrope', sans-serif;
  background: linear-gradient(135deg, #2d3436 0%, #000000 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  color: var(--light);
  overflow: hidden;
}

a{
  text-decoration: none;
}

/* Animated Background Elements */
.bg-blur {
  position: fixed;
  width: 200vw;
  height: 200vh;
  background: radial-gradient(circle at center, 
      rgba(108, 92, 231, 0.2) 0%, 
      rgba(0, 0, 0, 0) 50%);
  filter: blur(60px);
  animation: float 20s infinite alternate ease-in-out;
  z-index: -1;
}

.bg-circle {
  position: fixed;
  border-radius: 50%;
  filter: blur(30px);
  z-index: -1;
  animation: float 15s infinite alternate ease-in-out;
}

.bg-circle.c1 {
  width: 300px;
  height: 300px;
  background: rgba(253, 121, 168, 0.15);
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.bg-circle.c2 {
  width: 400px;
  height: 400px;
  background: rgba(108, 92, 231, 0.15);
  bottom: 5%;
  right: 10%;
  animation-delay: 2s;
}

.bg-circle.c3 {
  width: 200px;
  height: 200px;
  background: rgba(162, 155, 254, 0.15);
  top: 50%;
  right: 20%;
  animation-delay: 4s;
}

@keyframes float {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(20px, 20px) rotate(5deg); }
  100% { transform: translate(-20px, -20px) rotate(-5deg); }
}

/* Card Container */
.card-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  padding: 30px;
  perspective: 1000px;
}

.business-card {
  position: relative;
  width: 100%;
  min-height: 450px;
  background: var(--glass);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 25px;
  border: 1px solid var(--glass-border);
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  z-index: 1;
}

.card-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, 
      rgba(253, 121, 168, 0.3) 0%, 
      rgba(0, 0, 0, 0) 50%);
  animation: rotate-glow 20s linear infinite;
  z-index: -1;
}

@keyframes rotate-glow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Card Content */
.card-content {
  position: relative;
  padding: 40px;
  height: 100%;
  display: flex;
  flex-direction: column;
  z-index: 2;
}

/* Profile Section */
.profile-section {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

.avatar-container {
  position: relative;
  margin-right: 25px;
}

.avatar-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, 
      var(--accent) 0%, 
      rgba(0, 0, 0, 0) 70%);
  border-radius: 50%;
  filter: blur(10px);
  opacity: 0.5;
  animation: pulse 4s infinite alternate;
}

@keyframes pulse {
  0% { transform: scale(0.95); opacity: 0.3; }
  100% { transform: scale(1.05); opacity: 0.6; }
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--glass);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 2px solid var(--glass-highlight);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.avatar:hover {
  transform: scale(1.05);
}

.avatar svg {
  width: 60%;
  height: 60%;
}

.profile-info {
  flex: 1;
}

.name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 5px;
  line-height: 1.2;
}

.name span {
  color: var(--accent);
  position: relative;
}

.name span::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 3px;
  background: currentColor;
  opacity: 0.3;
}

.title {
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--secondary);
  margin-bottom: 5px;
  letter-spacing: 1px;
}

.company {
  font-size: 0.9rem;
  font-weight: 300;
  opacity: 0.8;
}

/* Contact Section */
.contact-section {
  margin-bottom: 40px;
}

.contact-row {
  display: flex;
  margin-bottom: 15px;
}

.contact-item {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 12px 15px;
  background: var(--glass);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 12px;
  margin-right: 15px;
  transition: all 0.3s ease;
}

.contact-item:last-child {
  margin-right: 0;
}

.contact-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-3px);
}

.contact-item i {
  font-size: 1rem;
  margin-right: 12px;
  color: var(--accent);
}

/* Social Section */
.social-section {
  display: flex;
  align-items: center;
  margin-top: auto;
}

.social-links {
  display: flex;
  flex: 1;
}

.social-btn {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  background: var(--glass);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color: white;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.social-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
      transparent, 
      rgba(255, 255, 255, 0.2), 
      transparent);
  transition: 0.5s;
}

.social-btn:hover::before {
  left: 100%;
}

.social-btn:hover {
  transform: translateY(-5px) scale(1.1);
}

/* Social brand colors */
.twitter:hover { background: #1DA1F2; }
.dribbble:hover { background: #EA4C89; }
.linkedin:hover { background: #0077B5; }
.behance:hover { background: #1769FF; }

.qr-code {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  background: var(--glass);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  position: relative;
  overflow: hidden;
}

.qr-pattern {
  width: 100%;
  height: 100%;
  background: 
      linear-gradient(45deg, var(--dark) 25%, transparent 25%) -20px 0,
      linear-gradient(-45deg, var(--dark) 25%, transparent 25%) -20px 0,
      linear-gradient(45deg, transparent 75%, var(--dark) 75%),
      linear-gradient(-45deg, transparent 75%, var(--dark) 75%);
  background-size: 40px 40px;
  opacity: 0.5;
}

/* Decorative Elements */
.deco-line {
  position: absolute;
  background: var(--glass-highlight);
  border-radius: 2px;
}

.deco-line.l1 {
  width: 100px;
  height: 2px;
  top: 30px;
  right: -30px;
  transform: rotate(45deg);
}

.deco-line.l2 {
  width: 100px;
  height: 2px;
  bottom: 30px;
  left: -30px;
  transform: rotate(-135deg);
}

.deco-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 15px var(--accent);
}

.deco-dot.d1 {
  top: 20%;
  right: 10%;
}

.deco-dot.d2 {
  bottom: 15%;
  left: 3%;
}

/* Responsive Design */
@media (max-width: 768px) {
  .card-content {
      padding: 30px;
  }
  
  .profile-section {
      flex-direction: column;
      text-align: center;
      margin-bottom: 30px;
  }
  
  .avatar-container {
      margin-right: 0;
      margin-bottom: 20px;
  }
  
  .contact-row {
      flex-direction: column;
  }
  
  .contact-item {
      margin-right: 0;
      margin-bottom: 10px;
  }
  
  .social-section {
      flex-direction: column;
  }
  
  .social-links {
      margin-bottom: 20px;
      justify-content: center;
  }
  
  .name {
      font-size: 1.8rem;
  }
}

@media (max-width: 480px) {
  .card-content {
      padding: 25px;
  }
  
  .name {
      font-size: 1.5rem;
  }
  
  .title {
      font-size: 1rem;
  }
  
  .contact-item {
      padding: 10px 12px;
      font-size: 0.9rem;
  }
  
  .social-btn, .qr-code {
      width: 40px;
      height: 40px;
  }
}

Final Output:

create-business-card-template-with-html-and-css.gif
Read AlsoResponsive Real Estate Landing Page using html css and javascript.webpResponsive Real Estate Website using HTML, CSS, and JavaScript (Source Code)

Conclusion:

Creating a business card template using HTML and CSS is a simple and creative project. It helps you learn layout, styling, and responsive design. You don’t need any frameworks or libraries — just clean code and a little imagination.

Whether you're building it for your personal site or as a learning project, this card will add a professional touch to your web skills.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: how to create a business card using html and css, html and css business card template tutorial, step-by-step guide to design business card, responsive business card using html and css, business card, html css, card design, web design, business card template
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Components

Please allow ads on our site🥺