How to Create a Heart Shape with CSS

CSS3 has greatly expanded what we can achieve on websites using just HTML and CSS. You can explore remarkable examples we’ve previously highlighted. However, let’s start with the basics rather than jumping into more complex designs that could be overwhelming.

We will begin with a simple project to help you grasp shapes and positioning in CSS, setting a foundation for more intricate work. With Valentine’s Day approaching, what better start than crafting a heart shape using HTML and CSS?

The Basics

Creating new shapes in CSS often involves combining simpler shapes like rectangles and circles. When looking at a heart shape, you can see it consists of two circles and a rectangle. HTML elements are typically square or rectangular, but with CSS3’s border-radius, we can transform these rectangles into circles effortlessly.

Start by adding a <div> element to serve as the base of our heart shape.

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

Next, turn it into a square by setting equal width and height. Choose any background color you like.

.heart-shape {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: rgba(250,184,66, 0.8);
}

Now, let’s create the circles.

Instead of adding new elements, we’ll use the pseudo-elements, :before and :after. Set up the :before pseudo-element as our first circle by giving it equal width and height, just like the div, then transforming it into a circle with a border-radius of 50%. Position it on the left side of the square.

.heart-shape:before {
  position: absolute;
  bottom: 0px;
  left: -100px;
  width: 200px;
  height: 200px;
  content: '';
  border-radius: 50%;
  background-color: rgba(250,184,66, 0.8);
}

Together with the square, the result will look like this:

Subsequently, create the second circle using the :after pseudo-element, applying the same styles as the first circle, and position it on the top of the square.

.heart-shape:after {
  position: absolute;
  top: -100px;
  right: 0px;
  width: 200px;
  height: 200px;
  content: '';
  border-radius: 50%;
  background-color: rgba(250,184,66, 0.8);
}

The result now appears as follows:

Combine these styles by grouping the pseudo-element selectors:

.heart-shape:before,
.heart-shape:after {
  position: absolute;
  width: 200px;
  height: 200px;
  content: '';
  border-radius: 50%;
  background-color: rgba(250,184,66, 0.8);
}
.heart-shape:before {
  bottom: 0px;
  left: -100px;
}
.heart-shape:after {
  top: -100px;
  right: 0px;
}

Now, to orient our heart correctly, we will apply a CSS3 transformation.

Apply the transformation to the square, and the pseudo-elements will automatically adjust their positions accordingly.

Rotate the heart so it appears upright:

.heart-shape {
  transform: rotate(45deg);
}

Here is how our heart looks now:

Final Results

The complete code for the heart shape is detailed below in HTML:

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

And in our CSS, it looks like this:

.heart-shape {
  position: relative;
  width: 200px;
  height: 200px;
  transform: rotate(45deg);
  background-color: rgba(250,184,66, 1);
}
.heart-shape:before,
.heart-shape:after {
  position: absolute;
  width: 200px;
  height: 200px;
  content: '';
  border-radius: 50%;
  background-color: rgba(250,184,66, 1);
}
.heart-shape:before {
  bottom: 0px;
  left: -100px;
}
.heart-shape:after {
  top: -100px;
  right: 0px;
}

Now, with the background opacity set to full, our heart looks like this:

Having perfected the heart shape, you can easily change the background color to pink or red. However, adding a border is not advisable as it might distort the heart’s appearance.

Conclusion

With CSS3, creating shapes like a heart is now effortlessly achievable. The border-radius property enables us to transform elements or even pseudo-elements into circles. Thanks to CSS3 transformations, we can rotate or shift the coordinates of an object with ease.

Your only limit is your creativity and imagination!