gradient effect on image from bottom to top css-CodePudding

I have one image, as a background and I want to add the gradient effect to an image from bottom to top

I have image:

and I want the above image with gradient image like this one from bottom to top:

HTML code:

<header>
   <div class="header-logo">
       <img src="logo.png" alt="">
    </div>
</header>

CSS code:

header{  
   background: url('/test/header.jpg') no-repeat;
   min-height: 132px;
   background-size: cover;
}

CodePudding user response：

You can simply add linear-gradient to the background attribute of header, which also includes the url (or local filepath) link to the image. You can give linear-gradient as many colors as you want (in my example there are three), and it will auto-blend them for you