Scroll effect (background gradient) - css

Question

I'm trying to make the background scroll on this code instead of the text.
meaning the text with the clipping stays in position and the background scrolls behind it in the page
how can I solve this?
EXAMPLE on codepen:
body {
margin: 0;
background-color: #000;
}
.page {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.container {
height: 100vh;
width: 100%;
overflow-y: scroll;
}
.content {
display: flex;
justify-content: center;
align-items: center;
height: 250vh;
font-size: 96px;
background: linear-gradient(
#000 0%,
#66458e 40%,
#fff 50%,
#66458e 75%,
#000 100%
);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-attachment: fixed;
}
.text {
text-align: center;
}
<div class="page">
<div class="container">
<div class="content">
<h1 class="text">TEST</h1>
</div>
</div>
</div>

Answer 1

The way to do this is to have a background div with the linear gradient then overlay the h1 element using position: fixed to stop the text from scrolling.
Rather than using background-clip text, you can to use mix-blend-mode: multiply with white text to bring the background through the text. I've then used a box shadow to mask out the remaining background outside the h1 element. See below
body {
margin: 0;
background-color: #000;
}
.content {
height: 250vh;
background: linear-gradient(
#000 0%,
#66458e 40%,
#fff 50%,
#66458e 75%,
#000 100%
);
}
.text {
margin:0;
position: fixed;
font-size: 8rem;
font-weight: bold;
left:50%;
top:50%;
box-shadow: 0px 0px 0px 200vh black;
color:white;
background-color: black;
mix-blend-mode: multiply;
transform: translate(-50%, -50%);
}
<div class="content">
<h1 class="text">TEST</h1>
</div>