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.

G

gs_admin

Author & Reviewer

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

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