Simple mask that fades an image from solid to transparent

suggest change

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:

Output with the mask:

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.

Feedback about page:

Feedback:
Optional: your email if you want me to get back to you:



Table Of Contents