Full Source Code — Free Download
Pure HTML + CSS — no JavaScript required. This luxury gift card features a
shimmering gold gradient surface using animated background-position,
a dark ribbon with pulsing CSS glow, an intricate bow with
subtle light-flicker keyframe, metallic text using
background-clip: text, and an interactive hover effect
(lift, rotate, scale, enhanced shadows) using transform and
transition. Perfect for portfolios, premium branding, digital coupons, or
learning advanced CSS animations.
HTML
CSS
JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Luxury Animated Gift Card</title>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700&display=swap" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&display=swap');
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: radial-gradient(circle at center, #555 30%, #222 100%);
margin: 0;
overflow: hidden;
}
.gift-card {
position: relative;
width: 480px;
height: 300px;
background: linear-gradient(135deg, #ffdf7d 60%, #be9a29 95%);
border-radius: 28px;
box-shadow:
inset 0 5px 18px 4px rgba(255, 255, 255, 0.45),
0 26px 74px -12px rgba(0,0,0,0.88);
overflow: hidden;
filter: drop-shadow(0 8px 30px rgba(190, 150, 40, 0.9));
transition: transform 0.4s ease, box-shadow 0.5s ease;
cursor: pointer;
animation: surface-shimmer 9s linear infinite;
}
.gift-card:hover {
transform: translateY(-15px) rotate(-3deg) scale(1.05);
box-shadow: 0 48px 115px -10px #c189157f, 0 34px 32px #d9b949cc;
animation-play-state: paused;
}
@keyframes surface-shimmer {
0%, 100% { background-position: -400% 0; }
50% { background-position: 400% 0; }
}
.gift-card::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: 28px;
background: linear-gradient(
120deg,
rgba(255, 255, 255, 0.02) 30%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0.02) 70%
);
background-size: 150% 150%;
animation: surface-shimmer 9s linear infinite;
z-index: 2;
}
.gift-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: 28px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><filter id="f"><feTurbulence type="fractalNoise" baseFrequency="0.074" numOctaves="3" stitchTiles="stitch" result="noise"/></filter><rect width="20" height="20" filter="url(%23f)" fill="black" fill-opacity="0.035"/></svg>');
mix-blend-mode: overlay;
pointer-events: none;
opacity: 0.12;
z-index: 3;
}
.ribbon {
position: absolute;
top: 8%;
left: -14%;
width: 140%;
height: 38px;
background: linear-gradient(120deg, #0c0a0a, #272325);
transform: rotate(-27deg);
box-shadow: 0 1px 12px 1px #000000bb;
border-radius: 12px;
z-index: 9;
animation: ribbon-glow 8s ease-in-out infinite;
filter: drop-shadow(0 0 8px #b99300cc);
}
@keyframes ribbon-glow {
0%, 100% { box-shadow: 0 1px 14px 2px #412801bb; }
50% { box-shadow: 0 1px 40px 4px #af7e1abb; }
}
.bow {
position: absolute;
top: 18%;
left: 20%;
width: 92px;
height: 70px;
pointer-events: none;
z-index: 11;
animation: bow-light-flicker 10s ease-in-out infinite;
}
@keyframes bow-light-flicker {
0%, 100% { filter: brightness(0.98); }
50% { filter: brightness(1.07); }
}
.bow-left, .bow-right {
position: absolute;
top: 32px;
width: 42px;
height: 36px;
background: linear-gradient(130deg, #1c1b23 65%, #545165 100%);
border-radius: 60% 40% 90% 50% / 60% 60% 100% 70%;
box-shadow: 0 9px 26px rgba(0,0,0,0.56), inset 0 2px 8px #7c7b9f;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
.bow-left { left: 0; transform: rotate(-17deg) scaleX(-1); }
.bow-right { right: 0; transform: rotate(16deg); }
.bow-center {
position: absolute;
top: 40px;
left: 30px;
width: 36px;
height: 26px;
background: linear-gradient(130deg, #2f2f45 75%, #8a88ac 100%);
border-radius: 50% 50% 55% 55% / 65% 70% 65% 70%;
box-shadow: 0 7px 16px rgba(0,0,0,0.43), inset 0 5px 10px #a3a3c4;
border: 3px solid #abaad6;
filter: drop-shadow(0 0 8px #bfbfe3a8);
}
.gift-card:hover .bow-left,
.gift-card:hover .bow-right,
.gift-card:hover .bow-center {
box-shadow: 0 12px 36px rgba(0,0,0,0.75), inset 0 5px 12px #d1d0ff;
border-color: #d0d0ff;
}
.gift-text {
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Cinzel', 'Georgia', serif;
font-size: 2.8rem;
font-weight: 700;
letter-spacing: 0.26em;
background: linear-gradient(90deg, #fff8ca 20%, #bd921e 50%, #fffdeb 80%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 4px 28px #f9e57dcc, 0 2px 1px #6f5905cc, 0 6px 32px #fffefb88;
filter: drop-shadow(0 0 24px #fff8baaa);
user-select: none;
z-index: 15;
animation: text-flicker 2.5s infinite alternate;
}
@keyframes text-flicker {
0% { filter: drop-shadow(0 0 18px #fff6ba99); opacity: 0.95; }
50% { filter: drop-shadow(0 0 32px #fffcebcc); opacity: 1; }
100% { filter: drop-shadow(0 0 20px #fffbbbaa); opacity: 0.97; }
}
</style>
</head>
<body>
<div class="gift-card" aria-label="Luxury animated gift card with golden ribbon and bow">
<div class="ribbon" aria-hidden="true"></div>
<div class="bow" aria-hidden="true">
<div class="bow-left"></div>
<div class="bow-right"></div>
<div class="bow-center"></div>
</div>
<div class="gift-text">GIFT CARD</div>
</div>
</body>
</html>
What Developers Say
⭐⭐⭐⭐⭐
"Absolutely stunning CSS animation — the gold shimmer and bow are incredibly detailed. Used this in my client's holiday campaign — pure CSS with no JS is a massive plus for page speed."— Lucas M., Frontend Developer
⭐⭐⭐⭐⭐
"The hover lift effect is so satisfying and the code is clean and educational. I learned the background-clip text technique and CSS animation-play-state from this single project."— Sarah K., UI Designer
Ready to Use This Free Gift Card Template?
Free download. No sign-up. Pure HTML + CSS. Use in any project.
CC BY 4.0 License · Free for personal and commercial use