Gradient overlay on element on the right side

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

U mean that the elements which are in red color should be replaced with gradient overlay? — Bharath Kumar, Nov 15 '17 at 11:48
Do you mean something like that? https://stackoverflow.com/a/35802412/1961144 — Sylwek, Nov 15 '17 at 11:50
Possible duplicate of [Prevent gradient overlay from scrolling](https://stackoverflow.com/questions/35801932/prevent-gradient-overlay-from-scrolling) — Sylwek, Nov 15 '17 at 11:52
An overlay over all elements as well: https://codepen.io/anon/pen/MOvxYX (just in case, you know, anyone might be found wanting) — UncaughtTypeError, Nov 15 '17 at 12:34

score -1 · Accepted Answer · answered Nov 15 '17 at 12:19

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

score -1 · Answer 2 · answered Nov 15 '17 at 12:21

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 */
}

Gradient overlay on element on the right side

2 Answers2