CSS Background Clip

by Adi Jaya

HTML

<div class="box">
  <div class="pulse">
    <div class="bg-gradient">
       <h1>TEXT</h1>
    </div>
  </div>
</div>

CSS

.box {
    position: relative;
    max-width: 400px;
    height: 400px;
    margin: 0 auto;
    background: #232323;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bg-gradient {
    background: linear-gradient(to right, #007ef4 0%, #ffffff 24%, #0011ff 50%, #ffffff 79%, #007fe8 100%);
    background-size: 50% 50%;
    animation: gradient 3s ease infinite;
    -webkit-background-clip: text;
}

h1 {
    margin: 0;
    color: transparent;
    font-family: sans-serif;
    font-size: 20vw;
    font-weight: 900;
    text-align: center;
}

.pulse {
    animation-name: pulse;
    animation-timing-function: ease-in-out;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-delay: 1s;
}

@keyframes gradient {
    from {
        background-position: 100% 0%;
    }

    to {
        background-position: 0% 1000%;
    }
}

@keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}