CODEWITHSUNDEEP
cssbackgroundgradient
Priya
Priya

Reputation: 49

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

Upvotes: 1

Views: 157

Answers (2)

UModeL
UModeL

Reputation: 1227

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>

Upvotes: 1

John Collins
John Collins

Reputation: 2951

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 🙂

header {
  background: linear-gradient(rgb(0 0 0 / 0%), rgb(255 255 255 / 34%), white), url(https://images.unsplash.com/photo-1487035170094-b76fc43abdf5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=500&q=60) no-repeat;
  min-height: 132px;
  background-size: cover;
}
<header>
  <div class="header-logo">
  </div>
</header>

Upvotes: 1

Related Questions