mask {\n mask-type: alpha;\n}<\/code><\/pre>\n\n\n\nWhen the mask layer is an image or a gradient, a mask-mode<\/code><\/a> property can be set on the HTML element to specify the type of masking. However, if an SVG <mask><\/code> element is used as the mask layer, the mask-type<\/code> can be set on the <mask><\/code> element itself. The mask-mode<\/code> property can override this preference.<\/p>\n\n\n
Syntax<\/h3>\n\n\nmask-type: alpha | luminance<\/code><\/pre>\n\n\n\nThe property accepts one keyword value of the alpha and luminance values.<\/p>\n\n\n\n
- Initial value:<\/strong>
luminance<\/code><\/li> Applies to:<\/strong> <mask><\/code> elements<\/li>Inherited:<\/strong> no<\/li>Computed value:<\/strong> absolute length<\/li>Animation type:<\/strong> discrete<\/li><\/ul>\n\n\nValues<\/h3>\n\n\n\/* Keyword values *\/\nmask-type: alpha;\nmask-type: luminance;\n\n\/* Global values *\/\nmask-type: inherit;\nmask-type: initial;\nmask-type: unset;<\/code><\/pre>\n\n\n\nluminance<\/code>: The default value. The luminance values of the mask are used for the mask values.<\/li>alpha<\/code>: The alpha values (alpha channel) of the mask are used for the mask values.<\/li>initial<\/code>: Applies the property\u2019s default value, luminance<\/code>.<\/li>inherit<\/code>: Adopts the mask-type<\/code> value of the parent.<\/li>unset<\/code>: Removes the current mask-type<\/code> from the element.<\/li><\/ul>\n\n\nAlpha and luminance masks<\/h3>\n\n\n
Alpha? Luminance? It\u2019s worth visiting these terms as they relate to CSS masking.<\/p>\n\n\n
Alpha masks<\/h4>\n\n\nImages are made of pixels, where each pixel contains color values. And some color values contain an alpha channel<\/strong> to set transparency on the color. An image with an alpha channel can be an alpha mask<\/strong>, like PNG images with transparent areas.<\/p>\n\n\n\n
In a simple masking operation, we have an element and a mask image placed on top of it. The alpha value of each pixel in the mask image will be merged with its corresponding pixel in the element.<\/p>\n\n\n\n
- If the alpha value is zero (i.e. transparent), it wins out and that part of the element is masked (i.e. hidden).<\/li>
- An alpha value of one (i.e. fully opaque) displays those pixels.<\/li>
- An alpha value between 0 and 1 (e.g. 0.5) allows the pixel to be visible, but with a certain level of transparency.<\/li><\/ul>\n\n\n\n
Bottom line, the mask value at a given point is the value of the alpha channel at that point of the mask image. If that point is fully transparent (i.e. alpha value of 0), then it won\u2019t display. The reverse is true with a fully opaque (i.e. alpha value of 1), where that point is fully displayed.<\/p>\n\n\n\n
The example bellow is an alpha mask that only contains black (i.e. alpha value of 1) and transparent areas (i.e. alpha value of 0).<\/p>\n\n\n\n
![\"\"](https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2021//02//s_ADCFB9F0494AC50BE88B2195592C05580BDEAAC4ECC0BBBFE6BE461D40F61FF7_1611418224888_alpha-mask-1.jpg?resize=1000%2C700&ssl=1\%22)
<\/figure>\n\n\nLuminance masks<\/h4>\n\n\n
In a luminance mask<\/strong>, colors and alpha values matter. When the alpha value is 0 (i.e. fully transparent), the element is hidden. The mask values vary depending on the color channel of that pixel when the alpha value is 1. For example, when the color is white, the element is visible; in the case of black area, the element is hidden.<\/p>\n\n\n\n
We saw that calculating mask values in an alpha mask<\/strong> is based only on the alpha values of the mask image. On the flip side, the mask values of a luminance mask<\/strong> are computed from both<\/em> the luminance and alpha values. Here\u2019s how the browser responds:<\/p>\n\n\n\n
- First, it computes a luminance value from the color channel values.<\/li>
- Then, it multiplies that computed luminance value by the corresponding alpha value to produce the mask value.<\/li><\/ol>\n\n\n\n
Check out the CSS Masking Module 1 specification<\/a> from the September 2019 Editor\u2019s Draft for more information.<\/p>\n\n\n\n
![\"\"](https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2021//02//s_ADCFB9F0494AC50BE88B2195592C05580BDEAAC4ECC0BBBFE6BE461D40F61FF7_1611418435637_luminance-mask-1.jpg?resize=1000%2C700&ssl=1\%22)
<\/figure>\n\n\nExample<\/h3>\n\n\n
The following example is using a mask element with black and transparent areas:<\/p>\n\n\n\n
<div>Put a nice mask on me!<\/div>\n<svg>\n <mask id=\"mask\">\n <path fill=\"black\" d=\"M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z\" \/>\n <\/mask> \n<\/svg><\/code><\/pre>\n\n\n\nUsing the element\u2019s ID (#mask<\/code>), we can place the mask on the <div><\/code> element.<\/p>\n\n\n\n
div {\n width: 100px;\n height: 100px;\n background-color: #134;\n mask-image: url(#mask);\n} <\/code><\/pre>\n\n\n\nSince this mask has black and transparent areas, we set mask-type<\/code> to alpha<\/code>:<\/p>\n\n\n\n
mask {\n mask-type: alpha; \n}<\/code><\/pre>\n\n\n\nIf the path element had white areas, the default value, luminance<\/code>, would work perfectly fine here instead.<\/p>\n\n\n\n