CSS Clipping and Masking Simple mask that fades an image from solid to transparent
Example
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.
