CSS

div {
  height: 200px;
  width: 200px;
  background: url(<http://lorempixel.com/200/200/nature/1>);
  mask-image: linear-gradient(to right, white, transparent); 
}

HTML

<div></div>

In the above example there is an element with an image as its background. The mask that is applied on the image (using CSS) makes it look as though it is fading out from left to right.

The masking is achieved by using a linear-gradient that goes from white (on the left) to transparent (on the right) as the mask. As it is an alpha mask, image becomes transparent where the mask is transparent.

Output without the mask:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/02e876b4-4ebd-4eff-a547-7ec0cc1ba493/Untitled.png

Output with the mask:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/195e1ccb-31ff-4de4-ae96-1e1ff199a6f8/Untitled.png

Note: As mentioned in remarks, the above example would work in Chrome, Safari and Opera only when used with the -webkit prefix. This example (with a linear-gradient as mask image) is not yet supported in Firefox.