Fade text when background behind text is animated

Question

This is an example of what I have:

 body { background: linear-gradient(174deg, #00d3fe, #000000, #ee00ff); background-size: 600% 600%; -webkit-animation: AnimationName 32s ease infinite; -moz-animation: AnimationName 32s ease infinite; animation: AnimationName 32s ease infinite; color: white; overflow: hidden; }.queue { position: absolute; top: 5vh; left: 2.5vw; max-height: 37vh; overflow: hidden; font-family: "Open Sans" }.queue:after { content: ""; position: absolute; top: 160px; left: 0; height: 37vh; width: 100%; background: linear-gradient(rgba(0, 0, 0, 0), #000); }.song { margin-top: 1.5vh; margin-bottom: 0vh; }.song h6 { margin: 0; color: darkgrey; }.song p { margin-top: 0px; margin-bottom: 1px; font-size: 19px; color: rgb(105, 105, 105); }.queue h3+div p { color: white; font-size: 20px; }.queue h3+div h6 { color: rgb(224, 224, 224); }.queue h3+div { margin-bottom: 1vh; } @-webkit-keyframes AnimationName { 0% { background-position: 0% 64% } 50% { background-position: 100% 37% } 100% { background-position: 0% 64% } } @-moz-keyframes AnimationName { 0% { background-position: 0% 64% } 50% { background-position: 100% 37% } 100% { background-position: 0% 64% } } @keyframes AnimationName { 0% { background-position: 0% 64% } 50% { background-position: 100% 37% } 100% { background-position: 0% 64% } }.fadeout.o10 {}.fadeout.o09 { opacity: 0.9; }.fadeout.o08 { opacity: 0.8; }.fadeout.o07 { opacity: 0.7; }.fadeout.o06 { opacity: 0.6; }.fadeout.o05 { opacity: 0.5; }.fadeout.o04 { opacity: 0.4; }.fadeout.o03 { opacity: 0.3; }.fadeout.o02 { opacity: 0.2; }.fadeout.o01 { opacity: 0.1; }.fadeout.fadeline { height: 2px; background: linear-gradient(174deg, #00d3fe, #000000, #ee00ff); -webkit-animation: AnimationName 32s ease infinite; -moz-animation: AnimationName 32s ease infinite; animation: AnimationName 32s ease infinite; }

 <div class="queue"> <h3>Queue</h3> <div class="song"> <p>Never Gonna Give You Up</p> <h6>Rick Astley | Requested by DJ</h6> </div> <div class="song"> <p>Never Gonna Give You Up</p> <h6>Rick Astley | Requested by DJ</h6> </div> <div class="song"> <p>Never Gonna Give You Up</p> <h6>Rick Astley | Requested by DJ</h6> </div> <div class="song"> <p>Never Gonna Give You Up</p> <h6>Rick Astley | Requested by DJ</h6> </div> <div class="song"> <p>Never Gonna Give You Up</p> <h6>Rick Astley | Requested by DJ</h6> </div> <div class="song"> <p>Never Gonna Give You Up</p> <h6>Rick Astley | Requested by DJ</h6> </div> <div class="fadeout"> <div class="fadeline o01"></div> <div class="fadeline o02"></div> <div class="fadeline o03"></div> <div class="fadeline o04"></div> <div class="fadeline o05"></div> <div class="fadeline o06"></div> <div class="fadeline o07"></div> <div class="fadeline o08"></div> <div class="fadeline o09"></div> <div class="fadeline o10"></div> <div class="fadeline o10"></div> <div class="fadeline o10"></div> <div class="fadeline o10"></div> </div> </div>

Now I want overflow text to be faded out but the background is animated so I can't have a solid gradient overlayed on the text.

From what I can find on StackOverflow, this has either never been done or is impossible.

I have already tried a background gradient where one side is transparent and the other is a solid color, but instead of a solid color, I put the gradient in the background. The problem is I can't find a way to align it well where the difference is unnoticeable.

Any answers help!

EDIT 1 As requested in the comments, here is a drawing of what the effect should look like. Click Here to View The Image

EDIT 2 I couldn't get the snippet to work (all code is in there though) but the StackOverflow Post referenced by @Stanislas gives the following result on my device . I am assuming this is because it is not the right dimensions as the background in body . I will try to get it to the right dimensions in the meantime and update with a full solution or problem.

Answer 1

Maybe this is what you're looking for THISSSSS . Don't try it on jsFiddle though... Just try it straight into the browser( it works ).. Didn't have enough rep. points to comment, so sorry.

 .queue { position: absolute; top: 5vh; left: 2.5vw; max-height: 37vh; overflow: hidden; font-family: "Open Sans"; -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); }

I just changed this in your code