CODEWITHSUNDEEP
htmlcsslinear-gradients
Mofizul Islam
Mofizul Islam

Reputation: 91

Background image bottom gradient with CSS3

I need this type gradient in the bottom of a background image

Gradient example

I can't figure out – how to I can make this type gradient with CSS. I've uploaded my code in jsFiddle.

.single-blog-bg {
  background-size: cover;
  background-attachment: fixed;
  height: 350px;
  position: relative;
}

.single-blog-bg:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 300px;
  bottom: 0;
  background: linear-gradient(to bottom, white 10%, white 30%, white 60%, white 100%);
  opacity: .5;
}
<div class="single-blog-bg" style="background-image: url(https://i.sstatic.net/VT8SR.jpg)"></div>

Here showing white gradient but not like what I expect.

Has there anybody who will help me to get the exact CSS code?

Upvotes: 4

Views: 11527

Answers (6)

Ramy Mohamed
Ramy Mohamed

Reputation: 258

Add This Style to Image:

mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

Upvotes: 3

Droid
Droid

Reputation: 142

.single-blog-bg {
    background-size: cover;
    background-attachment: fixed;
    height: 350px;
    position: relative; 
    }
.single-blog-bg:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    /*top: 300px*/
    bottom: 0;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 10%, rgba(255, 255, 255, 0.13) 60%, rgba(255, 255, 255, 0.04) 70%);
    /* opacity: .5; */
    height: 100%;
}
  opacity: .5;
}
<div class="single-blog-bg" style="background-image: url(https://images.unsplash.com/photo-1495935225637-fa5838607df7?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=)">
</div>

Upvotes: 1

David
David

Reputation: 141

Have you tried using alpha in the color?

Change the gradient rule to something like this:

.single-blog-bg:before{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100px;
  bottom: 0;
  background: linear-gradient(to bottom,  rgba(255,255,255,0) 10%, rgba(255,255,255,0.9) 100%);
}

Edit: Remove the opacity property, change the bottom color alpha and give the effect more height

Upvotes: 0

djmayank
djmayank

Reputation: 392

Try changing css- i have done for you

.single-blog-bg {
    background-size: cover;
    background-attachment: fixed;
    height: 350px;
    position: relative;    
}
.single-blog-bg:before{
    content: '';
    position: absolute;
  display: flex;
    left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgb(0, 0, 0) 30%, rgb(255, 255, 255) 100%);
  opacity: .5;
}

do check- https://codepen.io/djmayank/pen/vJyoVe

Upvotes: 0

Abin Thaha
Abin Thaha

Reputation: 4633

You can use the background like this. 

background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);

Check the codepen here

Upvotes: 0

Niyoko
Niyoko

Reputation: 7662

Use background: linear-gradient(to bottom, rgba(255,255,255,0), white 100%); for the bottom div.

I fork your jsfiddle here.

Upvotes: 0

Related Questions