Heart CSS

Heart CSS

by Adi Jaya

HTML

<div class="heart-container">
    <span class="heart red"></span>
    <span class="heart blue"></span>
</div>

CSS

body {
    margin: 0;
    background: #404040;
}

.heart-container {
    position: relative;
    text-align: center;
}

.heart {
    font-size: 350px;
    position: absolute;
    right: 0;
    left: 0;
}

.heart::before {
  content: '\2665';
}

.red {
    color: #f72a90;
}

.blue {
    color: #0c4db3;
}

.heart.red::before {
    text-shadow: 0 0 20px #ff93de;
}

.heart.blue {
    padding-left: 30px;
    top: 15px;
}

.heart.blue::before {
    text-shadow: 3px 0px 4px #9E9E9E;
}