Gradient under a image - html

Question

i want to make a gradient go under my wave effect so when you scroll down the wave fades away by using a gradient.
My CSS code:
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);
}
My HTML code for this:
<section>
<div class="wave">
</div>
<div class="waveafter"></div>
</section>
images:
this is what its like when you load up the page.
image 1
Gradient goes under the wave image to make it look like it fades away.
Image 2