user3299251 user3299251 - 1 year ago 87
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.

Answer Source

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)))
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download