This is a free, copy-paste ready luxury animated business card template built entirely with HTML and CSS — zero JavaScript required. The design features a dark background with a gold gradient triangle element, animated glare flash, circular photo placeholder with gold border, contact details with inline SVG icons, and a floating card animation on an infinite CSS loop. Both front and back sides are included in a single HTML file.
The typography combines Cinzel serif for the name and company headings with Montserrat sans-serif for contact details — creating a premium, editorial aesthetic that works for luxury brands, creative agencies, consultants, executives, and designers. The entire card is a UI component demonstrating advanced CSS clip-path, CSS filters, radial gradients, and animation-delay staggering — making it an excellent HTML CSS learning project too.
Open the file in VS Code or any text editor.
Replace YOUR NAME HERE with your name,
GENERAL MANAGER with your job title, and each placeholder contact detail with your
real phone, email, website, and address.
On the back card, change COMPANY NAME HERE and SLOGAN HERE.
To add your photo, replace the card-photo-placeholder div with an
<img> tag with style="width:100%;height:100%;object-fit:cover;border-radius:50%".
Adjust gradient colors in the CSS to match your brand palette.
This luxury business card template is perfect for: digital business card portfolios, interactive résumé websites, UI design showcases, frontend developer portfolio projects, client presentation mockups, design agency templates, executive personal branding pages, and HTML CSS learning exercises. The gold aesthetic suits luxury brands, finance, legal, consulting, and premium creative services especially well.
Released under Creative Commons Attribution 4.0 International (CC BY 4.0). Free for personal and commercial use with attribution to Coodeverse.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Luxury Animated Business Card</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&family=Cinzel:wght@700&display=swap" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&family=Cinzel:wght@700&display=swap');
body {
background: #222224;
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
color: #ccc;
font-family: 'Montserrat', sans-serif;
margin: 32px 0 34px;
font-size: 2.1rem;
letter-spacing: 1.2px;
text-shadow: 0 2px 18px #000a, 0 6px 54px #ffeb9488;
}
.card-group {
display: flex;
flex-direction: column;
gap: 42px;
align-items: center;
}
.business-card {
position: relative;
width: 430px;
height: 210px;
border-radius: 18px;
background: linear-gradient(120deg, #161617 82%, #3c2b0e 113%);
overflow: hidden;
box-shadow: 0 8px 32px #000a, 0 1px 9px #f7c03333;
border: 2.5px solid #ffefa5;
transition: box-shadow .35s, transform .32s;
animation: cardFloat 7s both infinite alternate;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.business-card:hover {
box-shadow: 0 32px 90px #23211d99, 0 8px 37px #ffeda877, 0 10px 60px #ccb16420;
transform: scale(1.032) rotate(-0.7deg) translateY(-7px);
border-color: #f7e07a;
z-index: 3;
}
@keyframes cardFloat {
0% { transform: translateY(0); }
45% { transform: translateY(-14px); }
100% { transform: translateY(0); }
}
.gold-triangle {
position: absolute;
left: 0;
bottom: 0;
width: 110%;
height: 120%;
background: linear-gradient(112deg, #ffe9a3 32%, #efd36b 56%, #ccb044 83%);
box-shadow: 0 0 32px #fde37855, 0 16px 42px #ffe4932f;
clip-path: polygon(0 100%, 0 0, 100% 87%, 100% 100%);
z-index: 1;
animation: goldShine 6s linear infinite alternate;
}
@keyframes goldShine {
0% { filter: brightness(1) blur(1px); opacity: .84; }
45% { filter: brightness(1.18) blur(1.6px); opacity: .89; }
80% { filter: brightness(1) blur(1.2px); opacity: .92; }
100% { filter: brightness(1.08) blur(2px); opacity: .82; }
}
.triangle-glare {
position: absolute;
left: 35%;
bottom: 2%;
width: 55%;
height: 14%;
background: linear-gradient(to right, #fffbe9aa, #ffe28988 65%, transparent 85%);
border-radius: 50px 60px 30px 100px / 80px 80px 40px 100px;
opacity: .56;
filter: blur(3.5px);
z-index: 2;
animation: glareFlash 7s infinite alternate;
}
@keyframes glareFlash {
0%, 58% { opacity: .48; left: 30%; }
65% { opacity: .91; left: 62%; }
70%, 100% { opacity: .5; left: 38%; }
}
.card-photo {
position: absolute;
left: 41px;
top: 32px;
width: 85px;
height: 85px;
border-radius: 50%;
background: linear-gradient(100deg, #fff8 64%, #c1a13b 120%);
border: 6px solid #ffd97e;
box-shadow: 0 8px 36px #bfa02acc, 0 5px 14px #8888;
z-index: 4;
overflow: hidden;
filter: drop-shadow(0 5px 24px #ffefb966);
animation: photoPop 2.6s alternate infinite;
}
@keyframes photoPop {
0% { box-shadow: 0 11px 30px #bfa02a53; }
100% { box-shadow: 0 28px 42px #bfa02a95; }
}
.card-photo::after {
content: "";
position: absolute;
left: 20%;
top: 11%;
width: 28px;
height: 12px;
background: linear-gradient(120deg, #fff9eecc 56%, #ffdfa74d 100%);
border-radius: 38% 62% 55% 45%;
filter: blur(1.2px);
opacity: .68;
transform: rotate(-14deg);
}
.card-photo-placeholder {
width: 100%;
height: 100%;
border-radius: 50%;
background: #e7e7eb;
display: flex;
align-items: center;
justify-content: center;
color: #b0892c;
font-size: 2.1rem;
font-family: 'Cinzel', serif;
font-weight: 700;
letter-spacing: .1em;
}
.info-block {
position: absolute;
left: 144px;
top: 38px;
color: #fff8e2;
z-index: 3;
display: flex;
flex-direction: column;
gap: 7px;
width: 225px;
text-shadow: 0 2px 18px #000a;
}
.name {
font-family: 'Montserrat', sans-serif;
font-size: 1.17rem;
font-weight: 700;
color: #f5d57d;
letter-spacing: .04em;
margin-bottom: 1px;
animation: glowText 1.5s infinite alternate;
text-shadow: 0 0 18px #ffe47d96;
}
.role {
font-size: .93rem;
font-family: 'Cinzel', serif;
color: #dfba66;
letter-spacing: .01em;
margin-bottom: 7px;
}
.details {
font-size: .9rem;
font-family: 'Montserrat', sans-serif;
color: #e7e2d9;
display: flex;
flex-direction: column;
gap: 4px;
opacity: .93;
font-weight: 500;
letter-spacing: .01em;
}
.details svg {
height: 1em;
width: 20px;
vertical-align: middle;
margin-right: 7px;
fill: #ffd971;
filter: drop-shadow(0 1px 7px #fffdb9aa);
}
.logo-circle {
position: absolute;
right: 36px;
top: 37px;
width: 94px;
height: 94px;
border-radius: 50%;
background: linear-gradient(120deg, #ffe588 60%, #d3a43c 100%);
box-shadow: 0 4px 34px #ebebea91, 0 2px 14px #c8b2599e;
border: 4px solid #efd89a;
z-index: 8;
animation: logoGlow 3.2s infinite alternate;
filter: drop-shadow(0 0 20px #be9a2977);
}
@keyframes logoGlow {
from { box-shadow: 0 3px 8px #eec65499, 0 15px 32px #eec65491; }
to { box-shadow: 0 9px 30px #ffc645aa, 0 23px 48px #fff3; }
}
.logo-text {
color: #fffbe0;
font-family: 'Cinzel', serif;
font-size: 1.15rem;
font-weight: 900;
letter-spacing: .09em;
text-shadow: 0 2px 8px #d1c23a77;
opacity: .97;
}
.comp-info {
position: absolute;
left: 43px;
top: 49px;
color: #ffebb7;
z-index: 7;
width: 176px;
text-shadow: 0 1.2px 16px #ffe39266;
}
.comp-name {
font-family: 'Cinzel', serif;
font-size: 1.09rem;
font-weight: 700;
color: #ffe082;
letter-spacing: .04em;
margin-bottom: 3px;
animation: glowText 1.5s infinite alternate;
text-shadow: 0 0 13px #fff099cc, 0 3px 20px #bb910877;
}
.comp-slogan {
font-size: .97rem;
font-family: 'Montserrat', sans-serif;
color: #f5dca4;
letter-spacing: .02em;
}
@keyframes glowText {
0% { text-shadow: 0 0 7px #ffd70044; }
100% { text-shadow: 0 0 17px #ffd700bb; }
}
</style>
</head>
<body>
<div class="title">BUSINESS CARD TEMPLATE</div>
<div class="card-group">
<!-- Front Side -->
<div class="business-card">
<div class="gold-triangle"></div>
<div class="triangle-glare"></div>
<div class="card-photo">
<div class="card-photo-placeholder">IMG</div>
</div>
<div class="info-block">
<div class="name">YOUR NAME HERE</div>
<div class="role">GENERAL MANAGER</div>
<div class="details">
<span><svg viewBox="0 0 16 16"><path d="M3 5v6h10V5H3zm9 5H4V6h8v4zm-4-1a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/></svg>0000 0000 00000</span>
<span><svg viewBox="0 0 16 16"><path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v7.8l5.646-3.057a.5.5 0 0 1 .708 0L15 11.8V4a1 1 0 0 0-1-1H2zm13 10V9.383l-5.646-3.057a1.5 1.5 0 0 0-1.708 0L1 9.383V13a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1z"/></svg>Your website place here</span>
<span><svg viewBox="0 0 16 16"><path d="M2 2h12v12H2V2zm1 1v10h10V3H3zm4.5 3a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-3 6V9a2 2 0 1 1 4 0v3H4.5zm5.5 0V9a2 2 0 1 1 4 0v3h-4z"/></svg>Your mail place here</span>
<span><svg viewBox="0 0 16 16"><path d="M8 2a6 6 0 0 0-6 6c0 3.866 4.547 7 6 7s6-3.134 6-7a6 6 0 0 0-6-6zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>Your street address here</span>
<span><svg viewBox="0 0 16 16"><path d="M13.293 11.293A8.451 8.451 0 0 1 8 13c-1.009 0-1.995-.18-2.852-.507l1.16-1.16A4.5 4.5 0 1 0 8 4.5c.558 0 1.096.09 1.605.244l1.175-1.175A7.97 7.97 0 0 1 8 2C3.589 2 0 5.589 0 10c0 1.256.234 2.455.658 3.545l1.171-1.171a7.458 7.458 0 0 1-1.135-3.58z"/></svg>Country name, 123</span>
</div>
</div>
</div>
<!-- Back Side -->
<div class="business-card">
<div class="gold-triangle"></div>
<div class="triangle-glare"></div>
<div class="logo-circle">
<span class="logo-text">LOGO HERE</span>
</div>
<div class="comp-info">
<div class="comp-name">COMPANY NAME HERE</div>
<div class="comp-slogan">SLOGAN HERE</div>
</div>
</div>
</div>
</body>
</html>
Common questions about this free HTML CSS business card template.
Yes — 100% free under Creative Commons Attribution 4.0. No sign-up, no payment, no watermarks. Click Download Project and use it in any personal or commercial project with attribution to Coodeverse.
Zero JavaScript. Every animation — the floating card, gold triangle shine, glare flash, photo glow, and logo pulse — is powered entirely by CSS @keyframes. Works in any browser with no npm, no build tools, and no dependencies.
Open in VS Code. Replace YOUR NAME HERE, GENERAL MANAGER, and each contact placeholder with your real info. To add your photo, replace the card-photo-placeholder div with <img src="photo.jpg" style="width:100%;height:100%;object-fit:cover;border-radius:50%">. Change COMPANY NAME HERE and SLOGAN HERE on the back card.
A single self-contained HTML file with all CSS embedded. Includes: front card (name, role, contact details, photo placeholder, SVG icons), back card (company name, slogan, logo circle), gold gradient triangle, animated glare, floating animation, glow effects, and Cinzel + Montserrat premium typography. Both sides in one file.
Yes. Under CC BY 4.0 you may use this template in commercial projects and client work with attribution to Coodeverse. Replace all placeholder text and images with your client's real branding and information.
Edit the color values in the CSS gradients: .gold-triangle background controls the main triangle, .logo-circle background controls the back logo glow, and border: 2.5px solid #ffefa5 on .business-card controls the card border. Change all #ffd97e, #ffe9a3, and #efd36b values to your brand colors.
Browse the full collection at coodeverse.com/projects — Epic Animated Delete, Cosmos Star Animation, Particle Fireworks, Holographic Login, Neon Toggle Switch, Red Bull Landing Page, Gold Circuit Board, and dozens more. All 100% free with complete source code.