How to gradient an image from bottom to top with css?

Question

I'm looking for a way to gradient images from the bottom to top

initial vs goal

Images run in slick slider. I've already tried with radiant gradient but without any useful results.

Answer 1

It is not blur, it is linear gradient from black to transparent. You can use some element or pseudoelement (after/before) to place it over image and give it linear-gradient.
Something like this:

.my-cool-item {
   position: relative;
   display: inline-block;
}

.my-cool-item:after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 300px;
   background: linear-gradient(180deg, rgba(0,0,0,0), black);
}

<div class="my-cool-item">
  <img src="https://i.stack.imgur.com/IuWLZ.jpg"/>
</div>