Search code examples
cssbackgroundgradient

gradient effect on image from bottom to top css

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: without effect image

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

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;
}
Solution

  • If you need a transition to the background color:

    header {
  background: linear-gradient(#fff0, #fff), url('https://i.sstatic.net/fZxQj.jpg') no-repeat;
  min-height: 132px;
  background-size: cover;
}
    <header>
  <div class="header-logo">
    <img src="logo.png" alt="">
  </div>
</header>

    If you need a transition with transparency:

    header {
  background: url('https://i.sstatic.net/fZxQj.jpg') no-repeat;
  min-height: 132px;
  background-size: cover;
  -webkit-mask-image: linear-gradient(#000, #0000);
  mask-image: linear-gradient(#000, #0000);
}
    <header>
  <div class="header-logo">
    <img src="logo.png" alt="">
  </div>
</header>