-3

enter image description here

Smoothly fade half portion of the image like i the picture. Opacity is not making smooth fading.

Oddrigue
  • 554
  • 5
  • 17
subodh kothiyal
  • 27
  • 4

1 Answers1

1

This can be an easy solution:

html,body{
  padding:0;
  margin:0;
  width:100%;
  height:100%;
  background-image: url("https://www.itl.cat/pngfile/big/76-763664_cute-child-in-a-flower-field-4k.jpg");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
}
div{
background: rgba(255,255,255,0.9);
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.9) 15%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.9) 85%, rgba(255,255,255,0.9) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0.9)), color-stop(15%, rgba(255,255,255,0.9)), color-stop(50%, rgba(255,255,255,0)), color-stop(85%, rgba(255,255,255,0.9)), color-stop(100%, rgba(255,255,255,0.9)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.9) 15%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.9) 85%, rgba(255,255,255,0.9) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.9) 15%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.9) 85%, rgba(255,255,255,0.9) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.9) 15%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.9) 85%, rgba(255,255,255,0.9) 100%);
background: linear-gradient(to right, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.9) 15%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.9) 85%, rgba(255,255,255,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
width:100%;
height:100%;
}
<div>
&nbsp;
</div>
Uncle John
  • 48
  • 8
  • You can use this website to generate gradient backgrounds: https://www.cssmatic.com/ – Uncle John Mar 06 '20 at 10:47
  • This is a good solution but in the OP case, I believe the image will be more of an `` than a `background-image` – Oddrigue Mar 06 '20 at 10:53
  • Yes you're right and this is just a sample. all you need to do is create a div layer over that image and use gradient background for that div. Something like this: https://jsfiddle.net/DanProjects/x3dsh9zy/ – Uncle John Mar 06 '20 at 11:02