---
title: "How to make heart in CSS?"
description: "How to make heart in CSS?"
author: "Ethan Karla"
published: 2021-07-15
updated: 2023-06-10
canonical: https://www.mindstick.com/forum/156495/how-to-make-heart-in-css
category: "css-css3"
tags: [".net", "web development", "css-css3", "html5"]
reading_time: 3 minutes
---
# How to make heart in CSS?
If is it possible make [heart](https://www.mindstick.com/blog/300287/severe-heart-failure-treatment) shape in CSS. then give an example of this shape.
## Replies
### Reply by Aryan Kumar
To make a heart in CSS, you can use the following steps:
1. Create a div element and set its width and height to 50px.
2. Set the div element's background color to red.
3. Use the ::before and ::after pseudo-elements to create two curves. The ::before pseudo-element should be rotated 45 degrees and the ::after pseudo-element should be rotated -45 degrees.
4. Set the ::before and ::after pseudo-elements' width and height to 25px.
5. Set the ::before and ::after pseudo-elements' border-radius to 50%.
Here is an example of the CSS code for a heart:
Code snippet
```plaintext
div {
width: 50px;
height: 50px;
background-color: red;
}
div::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 25px;
height: 25px;
border-radius: 50%;
transform: rotate(45deg);
}
div::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 25px;
height: 25px;
border-radius: 50%;
transform: rotate(-45deg);
}
```
This code will create a heart that is 50px wide and 50px high. The heart will be red with two curves that meet in the middle.
You can adjust the width and height of the heart, as well as the color of the background, to suit your needs. You can also use the ::before and ::after pseudo-elements to create other shapes, such as stars, flowers, and animals.
### Reply by Ravi Vishwakarma
## Heart Shape
 **\**
```
Animation Demo
Heart Shape
```
## \
---
Original Source: https://www.mindstick.com/forum/156495/how-to-make-heart-in-css
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.