Beautiful Valentine Card with CSS Heart Animation — Step-by-Step

🎯 What You'll Build #

A beautiful Valentine's Day card with a pure CSS beating heart, romantic gradient background, and a love message reveal animation.

---

📦 Get the Source Code #

> ☕ Download on Buy Me a Coffee →

---

🛠️ The CSS Heart #

The classic CSS heart is made with two rotated squares:

.heart {
    position: relative;
    width: 100px;
    height: 90px;
    margin: 0 auto;
    animation: beat 1.2s ease-in-out infinite;
}

.heart::before,
.heart::after {
    content: '';
    position: absolute;
    top: 0;
    width: 52px;
    height: 80px;
    border-radius: 50px 50px 0 0;
    background: #ff4d6d;
}

.heart::before {
    left: 50px;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}

.heart::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

@keyframes beat {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.15); }
    30% { transform: scale(1); }
    45% { transform: scale(1.1); }
}

This creates a realistic heartbeat rhythm — two quick pulses followed by a rest, just like a real heart!

---

🔗 Related #

• CSS Hearts: 5 Ways to Create Heart Shapes

• Floating Hearts Background Animation

• Will You Be My Valentine? — Interactive Website