Skip to main content
Creative Coding Projects

Birthday Wish Card Using HTML & CSS — Beginner Tutorial with Source Code

Learn to build a beautiful birthday wish card using only HTML and CSS. Step-by-step beginner tutorial with animated candles, cake design, and downloadable source code.

G

gs_admin

Author & Reviewer

Published

Jul 16, 2026

Read Time

8 min read

love.html
💝
Creative Coding Projects

🎯 What You'll Build

A charming birthday card built with pure HTML and CSS — no JavaScript required! Features a CSS-only cake illustration with flickering candles and a heartfelt message.

---

🔗 Live Demo

👉 Try the Live Demo →

---

📦 Get the Source Code

> ☕ Download 3 Color Variants on Buy Me a Coffee →

---

🛠️ Building the Card

The CSS Cake Trick

The entire cake is built using CSS pseudo-elements and gradients — no images needed:

css
1234567891011121314151617181920212223242526272829303132 
.cake {
    width: 120px;
    height: 80px;
    background: linear-gradient(#f8b4c8, #e8829e);
    border-radius: 10px 10px 5px 5px;
    position: relative;
    margin: 40px auto 20px;
}

/* Frosting layer */
.cake::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -5px;
    width: 130px;
    height: 30px;
    background: #fff;
    border-radius: 50%;
}

/* Candle */
.candle {
    width: 8px;
    height: 35px;
    background: linear-gradient(#ffd93d, #ff6b35);
    border-radius: 3px 3px 0 0;
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
}

Flickering Flame Animation

css
12345678910111213141516 
.flame {
    width: 12px;
    height: 20px;
    background: radial-gradient(ellipse at bottom, #ffd93d, #ff6b35, transparent);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    animation: flicker 0.3s ease-in-out infinite alternate;
}

@keyframes flicker {
    0%   { transform: translateX(-50%) scale(1) rotate(-3deg); }
    100% { transform: translateX(-50%) scale(1.1, 0.9) rotate(3deg); }
}

Responsive Card Layout

css
12345678910 
.birthday-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 40px;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

---

🎨 Customization

ElementPropertyValues
Card backgroundbackgroundTry rgba(255,200,200,0.1) for pink
Cake color.cake backgroundChange gradient colors
Flame color.flame backgroundGold, blue, or green gradient
Fontfont-familyDancing Script, Pacifico, etc.

---

🔗 Related

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