Happy Raksha Bandhan Greeting Card Animation using HTML& CSS

In this step-by-step tutorial, learn how to build a stunning, interactive Happy Raksha Bandhan Greeting Card using 100% Pure HTML5 and CSS3—completely without JavaScript or external libraries!

🌟 Key Features Covered:

Pure CSS Animated Rakhi: Built with floating CSS animations (@keyframes floatRakhi), a spinning petal ring, and multi-layered radial gradients for the center gem.
Glowing Silk Thread (Dhaaga): Rendered using multi-color linear gradients and box-shadow glowing effects.
Modern Glassmorphism UI: Features a dark glass card with backdrop-filter: blur(), glowing gold borders, and elegant ambient background radial glows.
Gradient Typography: Beautiful gold text styling created with -webkit-background-clip: text and custom fallbacks.
Zero External Dependencies: Built entirely with Vanilla HTML and CSS—runs fast, offline, and is fully responsive on mobile and desktop screens.

This project is perfect for web developers and coding enthusiasts wanting to practice modern CSS styling, keyframe animations, glassmorphism UI design, and festive greeting web pages!

Don't forget to Like, Share, and Subscribe to Computer Soft Skills for more creative coding content!

<!DOCTYPE html>

<head>

<title>Happy Raksha Bandhan</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

min-height: 100vh;

display: flex;

justify-content: center;

align-items: center;

background-color: #0c0814;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

overflow-x: hidden;

padding: 20px;

}

/* ======= AMBIENT TRICOLOR BACKGROUND GLOW ======= */

.glow-bg {

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 600px;

height: 600px;

background: radial-gradient(circle, rgba(255, 153, 51, 0.25) 0%, rgba(212, 175, 55, 0.15) 40%, rgba(19, 136, 8, 0.1) 70%, transparent 100%);

filter: blur(50px);

z-index: 0;

pointer-events: none;

animation: pulseGlow 6s ease-in-out infinite alternate;

}

@keyframes pulseGlow {

0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.8; }

100% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }

}

/* ======= MAIN GLASS CARD ======= */

.card {

position: relative;

z-index: 1;

background: rgba(22, 16, 34, 0.75);

border: 2px solid rgba(212, 175, 55, 0.4);

border-radius: 24px;

padding: 50px 30px;

max-width: 650px;

width: 100%;

text-align: center;

box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6),

0 0 30px rgba(212, 175, 55, 0.2);

backdrop-filter: blur(15px);

}

/* Decorative Gold Corner Borders */

.card::before {

content: '';

position: absolute;

top: 12px;

left: 12px;

right: 12px;

bottom: 12px;

border: 1px dashed rgba(212, 175, 55, 0.35);

border-radius: 18px;

pointer-events: none;

}

/* ======= RAKHI CONTAINER ======= */

.rakhi-wrapper {

position: relative;

width: 100%;

height: 180px;

display: flex;

justify-content: center;

align-items: center;

margin-bottom: 25px;

}

/* SILK THREAD (DHAAGA) */

.thread {

position: absolute;

width: 100%;

height: 8px;

background: linear-gradient(90deg,

#ff4500 0%,

#ffd700 25%,

#ff1493 50%,

#ffd700 75%,

#ff4500 100%

);

border-radius: 4px;

box-shadow: 0 0 10px rgba(255, 69, 0, 0.8),

0 0 15px rgba(255, 215, 0, 0.6);

}

/* RAKHI CENTER DIAL */

.rakhi-dial {

position: relative;

width: 140px;

height: 140px;

background: radial-gradient(circle, #e6005c 0%, #80002a 100%);

border-radius: 50%;

display: flex;

justify-content: center;

align-items: center;

border: 3px solid #ffd700;

box-shadow: 0 0 25px rgba(255, 215, 0, 0.8),

inset 0 0 15px rgba(0, 0, 0, 0.5);

z-index: 2;

animation: floatRakhi 4s ease-in-out infinite alternate;

}

@keyframes floatRakhi {

0% { transform: translateY(-5px) rotate(0deg); }

100% { transform: translateY(5px) rotate(3deg); }

}

/* PETALS AROUND RAKHI */

.petal-ring {

position: absolute;

width: 100%;

height: 100%;

border-radius: 50%;

border: 2px dashed #ffd700;

animation: spinRing 20s linear infinite;

}

@keyframes spinRing {

100% { transform: rotate(360deg); }

}

/* INNER FLORAL DESIGN */

.rakhi-inner {

width: 90px;

height: 90px;

background: radial-gradient(circle, #ffd700 0%, #ff9933 100%);

border-radius: 50%;

display: flex;

justify-content: center;

align-items: center;

border: 2px solid #ffffff;

box-shadow: 0 0 10px rgba(255, 215, 0, 0.9);

}

.center-gem {

width: 35px;

height: 35px;

background: radial-gradient(circle, #ffffff 0%, #ff0055 70%, #990033 100%);

border-radius: 50%;

border: 2px solid #ffd700;

box-shadow: 0 0 12px #ff0055;

}

/* ======= TYPOGRAPHY ======= */

.subtitle {

font-size: 1rem;

letter-spacing: 5px;

color: #ffd700;

text-transform: uppercase;

font-weight: 700;

margin-bottom: 8px;

}

.title {

font-family: Georgia, 'Times New Roman', serif;

font-size: 2.8rem;

font-weight: bold;

line-height: 1.2;

margin-bottom: 20px;

/* Gold Gradient Text */

background: linear-gradient(180deg, #FFFFFF 0%, #FFD700 60%, #FF9933 100%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.8));

}

.divider {

width: 120px;

height: 2px;

background: linear-gradient(90deg, transparent, #FFD700, transparent);

margin: 0 auto 25px auto;

}

.message {

color: #e2e0e7;

font-size: 1.1rem;

line-height: 1.8;

font-weight: 300;

margin-bottom: 30px;

}

.highlight {

color: #ffd700;

font-weight: bold;

}

/* ======= DECORATIVE BADGES ======= */

.badge-container {

display: flex;

justify-content: center;

gap: 15px;

flex-wrap: wrap;

}

.badge {

background: rgba(255, 215, 0, 0.1);

border: 1px solid rgba(255, 215, 0, 0.4);

color: #ffd700;

padding: 8px 20px;

border-radius: 50px;

font-size: 0.9rem;

letter-spacing: 1px;

backdrop-filter: blur(5px);

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

}

</style>

</head>

<body>

</div>

<div class="subtitle">CELEBRATING BOND OF LOVE</div>

<div class="title">HAPPY RAKSHA BANDHAN</div>

On this joyous occasion, celebrating the sacred thread that binds brothers and sisters in

<span class="highlight">unconditional love, protection, and lifelong memories</span>.

May this day bring endless happiness, laughter, and prosperity into your lives!

</p>

<div class="badge">🌸 Love & Protection</div>

<div class="badge">✨ Sacred Thread</div>

<div class="badge">🎉 Joyful Celebration</div>

</div>

</body>

</html>

Subscribe Our Channel

Search This Blog

Subjects Lists

Saturday, August 1, 2026