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

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.

1 answer

  • answered 2021-06-23 07:18 Jax-p

    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>