<3

HTML
<div class="heart"> </div> </div> <div class="heart" style="width:150px;background:radial-gradient(#DDB1F76B, #C3FCF7B0,#BC9FFF78,#9FEAFF)"> </div> <div class="heart" style="width:100px;background:pink"> </div> </div> <div class="name"> and if I was a fool for u i'd wait 500 million hrs on a park bench out on the moon, I fell inlove with alexandra</p> </span></p> </div>
CSS
.heart { width:200px; display:inline-block; -webkit-mask: radial-gradient(circle at 60% 65%, #C0D9C0 64%, transparent 65%) top left, radial-gradient(circle at 40% 65%, #C0D9C0 64%, transparent 65%) top right, linear-gradient(to bottom left, #C0D9C0 43%,transparent 43%) bottom left , linear-gradient(to bottom right,#C0D9C0 43%,transparent 43%) bottom right; -webkit-mask-size:50% 50%; -webkit-mask-repeat:no-repeat; mask:4 radial-gradient(circle at 60% 65%, #A6F0DF82 64%, transparent 65%) top left, radial-gradient(circle at 40% 65%, #A6F0DF82 64%, transparent 65%) top right, linear-gradient(to bottom left, #A6F0DF82 43%,transparent 43%) bottom left , linear-gradient(to bottom right,#A6F0DF82 43%,transparent 43%) bottom right; mask-size:50% 50%; mask-repeat:no-repeat; background:linear-gradient(#B4E0F7AD,#A6F0DF82,#FAFCC0); } .heart::before { content:""; display:block; padding-top:100%; } .name { margin: 0; padding: 0; position: absolute; top: 25%; width: 40%; text-align: center; font-size: 1em; color: #2a0a0a font-family: 'Times New Roman', serif; }
JAVASCRIPT
Expand for more options Login