How to put fixed shadow on the bottom item of a list?

Issue

I have a file picker. when select some file like this there is shadow on the bottom, when add more files like this the shadow must be still at the bottom, how can I do this?

Solution

This will get you started. It's not really a shadow, but linear-gradient background will provide the effect you are looking for though you will have to tweak the values to get it exactly how you want.

.container {
  display: flex;
  flex-direction: column;
  position: absolute;
  flex: 1;
}

.container img {
  margin: 0 0 12px 0;
}

.overlay {
  display: flex;
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 100px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 39%, rgba(255, 255, 255, 0) 100%);
}

<div class="container">
  <img src="https://i.stack.imgur.com/HQMHH.jpg" height="200" />
  <img src="https://i.stack.imgur.com/HQMHH.jpg" height="200" />
  <img src="https://i.stack.imgur.com/HQMHH.jpg" height="200" />
  <img src="https://i.stack.imgur.com/HQMHH.jpg" height="200" />
  <div class="overlay"> </div>

</div>

Answered By - Authentic Science