Градиент под изображением

Question

Я хочу сделать градиент go под моим волновым эффектом, чтобы при прокрутке вниз волна исчезала с помощью градиента.

Мой CSS код:

section {
width: 100%;
height: 100vh;

}

section .wave:before {
content: '';
width: 100%;
height: 143px;
background: url(images/wave2.png);
position: absolute;
top: 0;
left: 0;
opacity: 0.8;
animation: wave-reverse 15s linear infinite;

}

section .wave {
position: absolute;
width: 100%;
height: 143px;
bottom: 0;
left: 0;
background: url(images/wave2.png);
animation: wave 10s linear infinite;

}

section .wave:after {
content: '';
width: 100%;
height: 143px;
background: url(images/wave2.png);
position: absolute;
top: 0;
left: 0;
opacity: 0.6;
animation-delay: -5s;
animation: wave 15s linear infinite;

}

@keyframes wave {
0% {
    background-position: 0;
}

100% {
    background-position: 1360px;
}

}

@keyframes wave-reverse {
0% {
    background-position: 1360px;
}

100% {
    background-position: 0;
}

}

.waveGradient {
width: 100%;
top: 100px;
bottom: 0;
background-image: linear-gradient(#429bf4, transparent);

}

Мой HTML код для этого:

<section>
<div class="wave">
    </div>
    <div class="waveafter"></div>
</section>

images: это то, что вам нравится, когда вы загружаете страницу. image 1 Градиент проходит под изображением волны, чтобы он выглядел так, как будто он исчезает. Изображение 2