Scrolling navbar with gradient - css

Question

I'm trying to create a navigation bar with a fading gradient for the mobile version of a page. For a demonstration of what I'm describing, take a look at the mobile version of the Google search result page. The when you scroll the horizontal navbar (with links to news, shopping, images, etc. subpages), the far left and right of the text fades out.
As you can see, each of the navbars show fading gradients, at the same places relative to the viewport and at different places relative to the navigation links. On the first, the gradients are on 'alles' and 'shopping', on the second, the gradients are on 'alles' and the 'm' in maps, and on the third the gradient is on 'news' and no text is far enough to the right to have a gradient.
The challenge here is that the text needs to be scrollable, and the gradient needs to stay in the same place in the viewport. The position of the gradient relative to the text needs to change as the text scrolls.
All of the solutions I've found for gradient text with CSS involve using a -webkit-linear-gradient background with -webkit-background-clip: text;, and -webkit-text-fill-color: transparent;. This basically creates a gradient background which contours the text, and then makes the text invisible so the background can be seen. The background doesn't scroll.
Are there any solutions to this problem using CSS?
Thanks!

Answer 1

I would create an overflowing div on top of your bar with pointer-event: none;. This div would contain a gradient background from white to transparent to white again. It can be done using css or an image.
.bar {
position: relative;
width: 100%;
background-color: white;
}
.gradient {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
pointer-events: none;
background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);
}
<div class="bar">
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
<div class="gradient">
</div>
</div>

Answer 2

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
}
.nav-outter {
position: relative;
}
.nav-outter::before {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 100%;
content: '';
background: linear-gradient(to right, #fff, transparent);
pointer-events: none;
}
.nav-outter::after {
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 100%;
content: '';
background: linear-gradient(to left, #fff, transparent);
pointer-events: none;
}
.nav {
width: 100%;
display: flex;
background-color: #ddd9d9;
box-shadow: 0 2px 10px rgba(128, 128, 128, 0.336);
overflow: auto;
}
.nav-link {
padding: 10px 20px;
border-bottom: 3px solid transparent;
}
.nav-link:hover {
border-bottom-color: dodgerblue;
cursor: pointer;
transition: .3s;
}
<div class="nav-outter">
<div class="nav">
<div class="nav-link">Home</div>
<div class="nav-link">Images</div>
<div class="nav-link">News</div>
<div class="nav-link">Videos</div>
<div class="nav-link">Home</div>
<div class="nav-link">Images</div>
<div class="nav-link">News</div>
<div class="nav-link">Videos</div>
<div class="nav-link">Home</div>
<div class="nav-link">Images</div>
<div class="nav-link">News</div>
<div class="nav-link">Videos</div>
<div class="nav-link">Home</div>
<div class="nav-link">Images</div>
<div class="nav-link">News</div>
<div class="nav-link">Videos</div>
</div>
</div>