Skip to main content
Creative Coding Projects

Floating Hearts Background Animation — Pure CSS Tutorial

Add romantic floating hearts to any webpage using pure CSS keyframe animations. No JavaScript needed. Copy-paste ready code with customization guide.

P

Pakua De

Frontend Developer & Creative Coding Lead

Published

Jul 16, 2026

Read Time

6 min read

love.html
💝
Creative Coding Projects

🎯 What You'll Build

A beautiful floating hearts background animation using pure CSS — no JavaScript required. Just copy-paste into any project!

---

📦 Get 10 Color Variants

> ☕ Download on Buy Me a Coffee →

---

🛠️ The Complete Code

HTML — Just divs with heart characters:

html
123456789101112 
<div class="hearts-bg">
    <div class="heart" style="--i:1">❤️</div>
    <div class="heart" style="--i:2">💕</div>
    <div class="heart" style="--i:3">💖</div>
    <div class="heart" style="--i:4">💝</div>
    <div class="heart" style="--i:5">❤️</div>
    <div class="heart" style="--i:6">💗</div>
    <div class="heart" style="--i:7">💕</div>
    <div class="heart" style="--i:8">💖</div>
    <div class="heart" style="--i:9">💝</div>
    <div class="heart" style="--i:10">❤️</div>
</div>

CSS — The magic:

css
12345678910111213141516171819202122232425262728293031 
.hearts-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.heart {
    position: absolute;
    bottom: -50px;
    font-size: calc(15px + var(--i) * 3px);
    left: calc(var(--i) * 10% - 5%);
    opacity: 0.6;
    animation: floatUp calc(6s + var(--i) * 1s) linear infinite;
    animation-delay: calc(var(--i) * -1.5s);
}

@keyframes floatUp {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 0;
    }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% {
        transform: translateY(-110vh) rotate(720deg) scale(0.5);
        opacity: 0;
    }
}

That's it! Add this to any page for instant romance ✨

---

🔗 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