How to Make a Heart with CSS

Learn how to create a clean, scalable CSS heart using two reliable techniques: a classic rotated-square with circles and a modern clip-path approach. Copy these snippets to drop a heart into any UI in seconds.

Live Preview: Heart

Method 1: Rotated Square + Circles (Pseudo-elements)

.heart {
  width: 96px;
  height: 96px;
  background: #cd5454;
  position: relative;
  transform: rotate(-45deg);
  border-radius: 4px; /* softens the bottom point slightly */
}

/* Two circles form the rounded lobes */
.heart::before,
.heart::after {
  content: "";
  position: absolute;
  width: 96px;
  height: 96px;
  background: #cd5454;
  border-radius: 50%;
}

.heart::before {
  top: -48px;  /* centers the top-left circle */
  left: 0;
}

.heart::after {
  top: 0;
  left: 48px;  /* centers the top-right circle */
}

Method 2: Clip-Path Polygon (Single Element)

.heart-clip {<br>  width: 140px;<br>  aspect-ratio: 1 / 1; /* keep it square so the heart doesn't distort */<br>  background: #cd5454;<br>  /* Polygon points approximate a smooth heart */<br>  clip-path: polygon(<br>    50% 92%, 38% 84%, 28% 74%, 20% 64%, 14% 54%, 11% 44%,<br>    12% 34%, 18% 26%, 26% 20%, 36% 18%, 46% 20%, 50% 26%,<br>    54% 20%, 64% 18%, 74% 20%, 82% 26%, 88% 34%, 89% 44%,<br>    86% 54%, 80% 64%, 72% 74%, 62% 84%<br>  );<br>}

How This Works

The rotated-square method builds a heart by rotating a square -45deg for the point and overlaying two perfect circles as lobes via ::before and ::after. Matching sizes and positions blend the shapes into a heart silhouette.

The clip-path approach trims a single colored box into a heart using a polygon of percentage-based points. It scales cleanly when the box remains square, keep width and height equal (or set aspect-ratio: 1 / 1) to avoid distortion.

How to Center Content Inside a Heart

Turn the heart into a layout container and center with Flexbox or Grid. Place your text or icon as a child element.

Method 1: Use CSS Flexbox

.heart,
.heart-clip {
  display: flex;
  justify-content: center;
  align-items: center;
}

Method 2: Use CSS Grid

.heart,<br>.heart-clip {<br>  display: grid;<br>  place-items: center;<br>}

Keep inner content upright (rotated-square method)

Because .heart is rotated, any child content will rotate too. Counter-rotate the child to keep it upright:

.heart > * {
  transform: rotate(45deg);
}
/* If the child already needs its own transform, combine them: */
.heart > .icon {
  transform: rotate(45deg) scale(1.1);
}

When to Use Each Shape Method

Use the rotated-square + circles method when you’re comfortable with pseudo-elements and want very rounded lobes with broad browser support; it’s great for decorative UI icons. Use clip-path when you want a single-element heart that’s easy to size, animate, or mask; just keep the element square (equal width and height or aspect-ratio: 1 / 1) so it doesn’t distort.

Quick Customizations

Change color by editing background: #cd5454; and add depth with box-shadow (e.g., box-shadow: 0 6px 16px rgba(0,0,0,.2)). For the rotated method, tweak border-radius on the base square to sharpen or soften the tip; for clip-path, adjust polygon points to change the heart’s proportions.

Accessibility & SEO

If the heart conveys meaning, don’t rely on aria-label alone on a plain div. Ensure it’s exposed as an image role or has visible text.

  • Meaningful: add role=”img” with aria-label or aria-labelledby, or include visible text inside.
  • Decorative: mark it aria-hidden=”true”.