How to Create a Heart Shape with CSS Only

Introduction

When you want to display a heart shape on a website, it's common to use images or icon fonts. However, you can also draw beautiful heart shapes using only CSS.

This article introduces how to create a simple heart shape using the ::before and ::after pseudo-elements.

The Completed Heart

Here's the completed heart. It's drawn entirely with CSS, achieved by rotating two arcs.

Preview

HTML

<div class="demo-heart"></div>

CSS

.demo-heart {
  position: relative;
  width: 100px;
  height: 100px;
}

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

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

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

How It Works

The heart shape is created by rotating two vertical ellipses (rectangles with rounded tops) 45 degrees in opposite directions.

Here are the three key points:

1. **Creating two parts with pseudo-elements**
Using ::before and ::after, we create the left and right parts of the heart.

2. **Rounding the top with border-radius**
border-radius: 50px 50px 0 0; rounds only the top of the element.

3. **Adjusting rotation origin with transform-origin**
By setting the rotation origin to the bottom edge, the pointed parts of the heart align beautifully.

HTML Code

<div class="heart"></div>

CSS Code

.heart {
  position: relative;
  width: 100px;
  height: 100px;
}

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

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

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

Role of Each Property

position: relative

Sets the parent element as a reference point. This allows pseudo-elements with position: absolute to be positioned relative to the parent.

border-radius

50px 50px 0 0 rounds only the top left and right corners. This creates a vertically elongated semi-circle.

transform: rotate

::before rotates -45 degrees and ::after rotates 45 degrees, arranging them in a V-shape.

transform-origin

Sets the rotation origin point. 0 100% means bottom-left, 100% 100% means bottom-right. This makes the pointed parts align nicely.

Customization

This heart can be easily customized.

**To change the size**
Modify the width and height values. Adjust the pseudo-element sizes proportionally as well.

**To change the color**
Just change the background-color value. You can also use gradients.

Color Variations

By simply changing the background-color, you can create hearts in various colors.

Preview

HTML

<div style="display: flex; gap: 20px;">
  <div class="demo-heart demo-heart--pink"></div>
  <div class="demo-heart demo-heart--purple"></div>
  <div class="demo-heart demo-heart--gradient"></div>
</div>

CSS

.demo-heart--pink::before,
.demo-heart--pink::after {
  background-color: #ff6b9d;
}

.demo-heart--purple::before,
.demo-heart--purple::after {
  background-color: #a855f7;
}

.demo-heart--gradient::before,
.demo-heart--gradient::after {
  background: linear-gradient(135deg, #ff6b9d 0%, #ff4757 100%);
}

Summary

By utilizing CSS pseudo-elements, you can draw heart shapes without using images.

This technique can be applied to various other shapes as well. The beauty of CSS is that by combining ::before and ::after, you can create complex shapes with minimal code.

Feel free to customize the color and size to use in your own projects.