Web Platform Team Blog

Making the web awesome

CSS luminance masking now available in Chrome Canary and Webkit Nightly


CSS masks provide means to partially of fully hide images by using an image (or another graphical element) as an alpha mask or a luminance mask.

If until now only alpha masks were available, now one can select between the two types by using the -webkit-mask-source-type property (in Webkit Nightly) and the mask-source-type property (you need to enable Web Platform features in Chrome Canary).

Let’s consider an image and a mask. We can apply the mask over the image in the following way:

img {
-webkit-mask-image: url(mask.png);
-webkit-mask-repeat: round;

In this case, the default mask type is alpha, so only the alpha values of the mask are considered: everything outside the rainbowish circle has alpha 0, so the image will be fully transparent, and everything inside the circle has an alpha of 1, so the image will be displayed. This codepen demo illustrates the default behaviour:


The luminance value is determined by the RGB values of the mask and the luminance coefficients as follows: luma = (0.2126 * R + 0.7152 * G + 0.0722 * B). To determine the transparency of the object, the alpha channel of the object is then multiplied by the luminance value and the alpha channel of the mask.

So, where the old mask had an alpha of 0, it will still remain zero, but where is was 1 it will become partially transparent depending on the colors of the rainbow. This codepen demo illustrates luminance masking in action:


It should be noted that, besides pixel images like PNG or JPG, luminance masking supports SVG images and even CSS gradients.

Feel free to share your thoughts about this new feature in the comments section!

Comments are closed.