How to make a Heart using only CSS
In this tutorial, I will show you how easily you can make a heart using CSS. I’m styling it inside a head tag in a style tag. In body, I’m taking a div class name as heart and only styling that. This styling is known as internal styling.
You can also learn,
- Make an HTML5 video in slow motion using DOM playbackRate property
- Endless or Infinite Rotate Animation in CSS
Create heart using CSS
Here I am providing an CSS code to create a red heart. You can customize it to make changes to this heart.
<!DOCTYPE html> <html> <head> <style> .heart { position:absolute; top: 70px; left: 95px; width:200px; height:170px; margin:175px; opacity:.8; } .heart:before,.heart:after { position: absolute; content: ""; width: 100px; height:160px; background :red; border-radius:50px 50px 0 0; } .heart:before{ left:100px; -webkit-transform-rotate(-45deg); transform:rotate(-45deg); -webkit-transform-origin:0 100%; transform:origin:0 100%; } .heart:after{ left:30px; top:-70px; -webkit-transform-rotate(45deg); transform:rotate(45deg); -webkit-transform-origin:0 100%; transform:origin:100% 100%; } </style> </head> <body> <div class="heart"></div> </body> </html>
The output of this file will look like this if you run on a browser:

red heart using css
As you can see above I have created a div class in the body.
<body> <div class="heart"></div> </body>
We can identify the div by its class nameĀ heart.
You may also like to learn
Leave a Reply