user3299251 user3299251 - 7 months ago 45
CSS Question

CSS Image to transparant

I want to create a background image which will flow into transparency.

I've found a lot of ways to put a gradient on a background image and that is working and all but i can't find how to let a image go to transparency. I even doubt if it is possible.

So again, i'm not looking for a gradient OVER a image but the image itself should be the gradient. I did find a way with a mask but that would make the whole div go from visible to invisible incl. everything in that div.

Would love some help! Thanks in advance.


You can use webkit-mask-image. Check Mozilla Developer network:

Browser Support for webkit-mask:

Check JS Fiddle


content: "";
  background: url( ;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
  -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))