mask-image
The mask-image
CSS property sets the image that is used as mask layer for an element.
By default this means the alpha channel of the mask image will be multiplied with the alpha channel of the element. This can be controlled with the mask-mode
property.
css
/* Keyword value */
mask-image: none;
/* <mask-source> value */
mask-image: url(masks.svg#mask1);
/* <image> values */
mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
mask-image: image(url(mask.png), skyblue);
/* Multiple values */
mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1), transparent);
/* Global values */
mask-image: inherit;
mask-image: initial;
mask-image: revert;
mask-image: revert-layer;
mask-image: unset;
Syntax
Values
Formal definition
Initial value | none |
---|---|
Applies to | all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements |
Inherited | no |
Computed value | as specified, but with url() values made absolute |
Animation type | discrete |
Formal syntax
mask-image =
<mask-reference>#
<mask-reference> =
none |
<image> |
<mask-source>
<image> =
<url> |
<gradient>
<mask-source> =
<url>
<url> =
url( <string> <url-modifier>* ) |
src( <string> <url-modifier>* )
Examples
Setting a mask image with a URL
Specifications
Specification |
---|
CSS Masking Module Level 1 # the-mask-image |
Browser compatibility
BCD tables only load in the browser