Masking images & videos in CSS

With the mask-image CSS property, we can easily apply a mask to any element.

The CSS is pretty simple, and as you can see, it works like the Background CSS property. We choose an image (a transparent PNG or better, a SVG file), and we can set his position and size. The mask can also be repeated (in x, y or both):

.mask  {
    -webkit-mask-image:url(/wp-content/uploads/2020/10/blob.svg);
    -webkit-mask-position:center center;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-size:cover;
  
    mask-image:url(/wp-content/uploads/2020/10/blob.svg);
    mask-position:center center;
    mask-repeat:no-repeat;
    mask-size:cover;
}

Notice that we have to use the -webkit- prefix for a better browser support.

With the same mask, we can have different effect, by changing his position and size:

.mask  {
    -webkit-mask-image:url(/wp-content/uploads/2020/10/donut.svg);
    -webkit-mask-position:left top;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-size:150%;
  
    mask-image:url(/wp-content/uploads/2020/10/donut.svg);
    mask-position:left top;
    mask-repeat:no-repeat;
    mask-size:150%;
}

We can use these masks to create some nice banners, hero sections, or even use them for videos.

Some examples from the design set Unlimited Elements :