Skip to main content
Creative Coding Projects

Happy Birthday My Love: Animated Birthday Wish Website with HTML, CSS & JavaScript

Create a stunning animated birthday wish website for your loved one using HTML, CSS & JavaScript. Floating balloons, confetti, custom messages, and background music.

G

gs_admin

Author & Reviewer

Published

Jul 16, 2026

Read Time

12 min read

love.html
💝
Creative Coding Projects

🎯 What You'll Build

A gorgeous, personalized birthday wish website with floating balloons, twinkling stars, confetti explosions, and a customizable love message. The best part? You can personalize it with just a URL parameter!

---

🔗 Live Demo

👉 Try the Live Demo →

Try adding ?name=Sarah to the URL to see personalization in action!

---

📦 Get the Source Code

> Want the complete, customizable source code with 5 theme variants? > > ☕ Download on Buy Me a Coffee → > > Includes: Full source code • 5 color themes • Background music support • Photo gallery add-on • Deployment guide

---

🛠️ Let's Build It Step by Step

Step 1: Project Setup

Create three files in a folder:

1234 
birthday-love/
├── index.html
├── style.css
└── script.js

Step 2: HTML Structure

html
123456789101112131415161718192021222324252627282930 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Happy Birthday My Love 🎂</title>
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="confetti"></canvas>
    
    <div class="container">
        <div class="card">
            <div class="cake">🎂</div>
            <h1>Happy Birthday</h1>
            <h1 class="name" id="bdayName">My Love</h1>
            <p class="message" id="bdayMsg">
                On this special day, I want you to know that you are 
                the most amazing person in my life. 💕
            </p>
            <div class="cta">
                <button onclick="celebrate()">🎉 Make a Wish!</button>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Step 3: CSS Styling — The Magic ✨

The real beauty comes from CSS animations. Here are the key techniques:

Gradient Text Animation:

css
12345678910111213 
h1 {
    font-family: &#039;Dancing Script', cursive;
    font-size: 2.8rem;
    background: linear-gradient(90deg, #ff6b9d, #ffd93d, #ff6b9d);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    to { background-position: 200% center; }
}

Floating Balloon Animation:

css
12345678910111213141516171819202122232425 
.balloon {
    position: fixed;
    bottom: -150px;
    width: 50px;
    height: 65px;
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    opacity: 0.85;
    animation: float linear infinite;
}

.balloon::after {
    content: &#039;';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 80px;
    background: rgba(255,255,255,0.3);
}

@keyframes float {
    0%   { transform: translateY(0) rotate(0deg); opacity: 0.85; }
    100% { transform: translateY(-120vh) rotate(15deg); opacity: 0; }
}

Step 4: JavaScript — Confetti & Personalization

URL-based personalization — the killer feature:

javascript
123456 
// Read name from URL: ?name=Sarah
const params = new URLSearchParams(window.location.search);
if (params.get(&#039;name&#039;)) {
    document.getElementById(&#039;bdayName&#039;).textContent = 
        decodeURIComponent(params.get(&#039;name&#039;));
}

Confetti explosion on button click:

javascript
1234567891011121314151617181920 
class Particle {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.vx = (Math.random() - 0.5) * 12;
        this.vy = Math.random() * -15 - 5;
        this.gravity = 0.4;
        this.life = 1;
        this.color = colors[Math.floor(Math.random() * colors.length)];
        this.size = 4 + Math.random() * 6;
    }
    // ... update and draw methods
}

function celebrate() {
    for (let i = 0; i < 200; i++) {
        particles.push(new Particle(canvas.width/2, canvas.height*0.6));
    }
    animateConfetti();
}

---

🎨 How to Customize

What to ChangeWhere to EditExample
Recipient NameURL parameter?name=Sarah
Messageindex.html line 15Change the paragraph text
Colorsstyle.css line 12Modify gradient colors
Balloon Colorsscript.js line 5Edit the colors array
Backgroundstyle.css bodyChange gradient values

---

🚀 How to Deploy for Free

  1. 1. Create a GitHub account (free)
  1. 2. Create a new repository → upload your 3 files
  1. 3. Go to Settings → Pages → Source: main branch
  1. 4. Your site will be live at https://yourusername.github.io/repo-name/
  1. 5. Share the link with ?name=TheirName added! 🎉

---

📦 Download Complete Source Code

> ☕ Get the Premium Version on Buy Me a Coffee → > > Premium includes: 5 color themes (Rose, Gold, Ocean, Galaxy, Forest) • Photo gallery integration • Background music player • Custom font support

---

🔗 Related Projects

G

About the Author: gs_admin

A senior technical contributor specializing in architectural designs, software optimization, database structures, and developer education. Passionate about writing clean code and sharing engineering knowledge.

PREVIOUS ARTICLE Beginner's Guide to Machine Learning in 2026