Skip to main content
Creative Coding Projects

CSS Hearts: 5 Ways to Create Heart Shapes with Pure CSS

Master 5 different techniques to create heart shapes using pure CSS. From border-radius tricks to clip-path and SVG. Copy-paste ready code snippets.

G

gs_admin

Author & Reviewer

Published

Jul 16, 2026

Read Time

7 min read

love.html
💝
Creative Coding Projects

🎯 5 CSS Heart Techniques

Method 1: The Classic (Rotated Squares)

css
1234567891011121314151617181920212223 
.heart-classic {
    position: relative;
    width: 100px; height: 90px;
}
.heart-classic::before,
.heart-classic::after {
    content: '';
    position: absolute;
    top: 0;
    width: 52px; height: 80px;
    border-radius: 50px 50px 0 0;
    background: #ff4d6d;
}
.heart-classic::before {
    left: 50px;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}
.heart-classic::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

Method 2: clip-path (Modern)

css
12345 
.heart-clip {
    width: 100px; height: 100px;
    background: #ff4d6d;
    clip-path: path('M50 90 C25 70, 0 50, 0 30 C0 10, 20 0, 35 0 C45 0, 50 10, 50 20 C50 10, 55 0, 65 0 C80 0, 100 10, 100 30 C100 50, 75 70, 50 90Z');
}

Method 3: Border-radius Only

css
123456 
.heart-border {
    width: 50px; height: 50px;
    background: #ff4d6d;
    transform: rotate(-45deg);
    border-radius: 50% 0 50% 50%;
}

Method 4: Inline SVG

html
123 
<svg viewBox="0 0 32 32" width="100">
    <path fill="#ff4d6d" d="M16 28 C8 20, 0 14, 0 8 C0 3, 3 0, 7 0 C11 0, 14 3, 16 6 C18 3, 21 0, 25 0 C29 0, 32 3, 32 8 C32 14, 24 20, 16 28Z"/>
</svg>

Method 5: Box-shadow Magic

css
123456789101112131415 
.heart-shadow {
    width: 10px; height: 10px;
    background: transparent;
    box-shadow:
        /* Build heart pixel by pixel */
        5px 0 0 #ff4d6d, 10px 0 0 #ff4d6d,
        0 5px 0 #ff4d6d, 5px 5px 0 #ff4d6d,
        10px 5px 0 #ff4d6d, 15px 5px 0 #ff4d6d,
        -5px 10px 0 #ff4d6d, 0 10px 0 #ff4d6d,
        5px 10px 0 #ff4d6d, 10px 10px 0 #ff4d6d,
        15px 10px 0 #ff4d6d, 20px 10px 0 #ff4d6d,
        0 15px 0 #ff4d6d, 5px 15px 0 #ff4d6d,
        10px 15px 0 #ff4d6d, 15px 15px 0 #ff4d6d,
        5px 20px 0 #ff4d6d, 10px 20px 0 #ff4d6d;
}

Each method has trade-offs — use clip-path for modern browsers, the classic method for maximum compatibility.

---

🔗 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