Skip to main content
Creative Coding Projects

Animated Love Letter with HTML & CSS — Envelope Opening Effect

Create a romantic animated love letter with an envelope opening effect using pure CSS. Click to open, reveal your personalized message.

P

Pakua De

Frontend Developer & Creative Coding Lead

Published

Jul 16, 2026

Read Time

10 min read

love.html
💝
Creative Coding Projects

🎯 What You'll Build

A realistic animated envelope that opens on click with a CSS 3D flip, revealing a love letter sliding up from inside. Pure CSS + minimal JavaScript!

---

📦 Get the Source Code

> ☕ Download on Buy Me a Coffee →

---

🛠️ The Envelope CSS

3D Flap Opening

css
1234567891011121314 
.envelope-flap {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 50%;
    background: linear-gradient(135deg, #5a9fe0, #4a90d9);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    transform-origin: top;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 5;
}

.envelope.open .envelope-flap {
    transform: rotateX(180deg);
}

Letter Slide-Up

css
1234567891011121314 
.letter-paper {
    position: absolute;
    bottom: 10px; left: 10px; right: 10px;
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    transform: translateY(0);
    transition: transform 1s ease-out 0.5s;
    color: #333;
}

.envelope.open .letter-paper {
    transform: translateY(-120%);
}

JavaScript Trigger

javascript
123 
document.querySelector('.envelope').addEventListener('click', function() {
    this.classList.add('open');
});

---

🔗 Related

P

About the Author: Pakua De

Frontend Developer & Creative Coding Lead

Pakua spends most weekends turning odd ideas — bouncing DVD logos, generative art, tiny browser games — into working code. He writes Geeky Script's Creative Coding series, teaching JavaScript and CSS through playful, visual projects rather than dry syntax drills.

PREVIOUS ARTICLE Beginner's Guide to Machine Learning in 2026