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.
Syntax
/* 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;
Values
none-
This keyword is interpreted as an opaque white image layer.
<mask-source><image>-
An image value used as mask image layer.
Formal definition
| Initial value | none |
|---|---|
| Applies to | All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element |
| Inherited | no |
| Computed value | the keyword none, a computed <image>, or a computed <url> |
| Animation type | discrete |
Formal syntax
<mask-reference>#