Gradient overlay on element on the right side - css

Question

I have created a container with elements that is scrollable. I want the element on the right side to have a gradient overlay. How can I create that with CSS?
.container {
display: flex;
flex-wrap: nowrap;
overflow-x: scroll;
width: 1000px;
}
.element {
min-width: 200px;
height: 100px;
background-color: red;
margin-right: 10px;
}
<div class="container">
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
https://codepen.io/naomilea/pen/RjZGaM

Answer 1

If you are just looking for the last element to have a gradient color, you can code your css like this:
.container {
display: flex;
flex-wrap: nowrap;
overflow-x: scroll;
width: 1000px;
}
.element {
min-width: 200px;
height: 100px;
background-color: grey;
margin-right: 10px;
}
.element:last-child
{
background: -webkit-linear-gradient(to right, grey, white);
background: -o-linear-gradient(to right, grey, white);
background: -moz-linear-gradient(to right, grey, white);
background: linear-gradient(to right, grey, white);
}
<div class="container">
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
Check updated codepen

Answer 2

Add this to the div element you want to add the gradient style
.element {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, red , white); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(left, red, white); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(left, red, white); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , white); /* Standard syntax */
}