Heart Shape with CSS

Submit By webmaster 1 month ago in css category
You can create a Heart Shape using pure CSS. By utilizing the CSS masking feature, you can apply it to a single element like a div, or you can also use it with any image.
Preview HTML CSS JavaScript Resources
<h1>Heart Shape with CSS </h1> <div class="heart"></div> <h1>Heart shape with Image via CSS</h1> <img src="/img/bg.png" class="heart" alt="random image" />
:root{ --heart: radial-gradient(#000 69%,#0000 70%) 84.5%/50%; } .heart, .heart-rating { height: 250px; aspect-ratio: 1; -webkit-mask-box-image: var(--heart); mask-border: var(--heart); clip-path: polygon(-41% 0,50% 91%, 141% 0); background: #cc333f; } .heart-rating-wrap{ display: flex; } .heart-rating{ height: 30px; margin-right: 2px; background: #ddd; } .heart-rating:hover{ background: #cc333f; } @supports not (-webkit-mask-box-image: var(--heart)) { .heart { mask: radial-gradient(at 70% 31%,#000 29%,#0000 30%), radial-gradient(at 30% 31%,#000 29%,#0000 30%), linear-gradient(#000 0 0) bottom/100% 50% no-repeat; } }

Download Heart Shape with CSS snippet code.

This HTML, CSS, JavaScript and Bootstrap snippet is free (open-source) hence you can use it in your project. You can modify the above editor code and see the live update. You can also download the modify code. Feel free to play with Heart Shape with CSS snippet code. If you like it then don't forget to share this code with your friends.

Free code snippet playground

Let's share the example by using HTML, CSS, JavaScript and Bootstrap.

Add New Snippet