mask
Summary
This property is shorthand for setting mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-composite and mask-size. Omitted values are set to their original properties’ initial values.
Overview table
- Initial value
See individual properties.- Applies to
- All elements. In SVG, it applies to container elements without the <defs> element and all graphics elements.
- Inherited
- No
- Media
- visual
- Computed value
- See individual properties.
- Animatable
- No
- Percentages
- See individual properties.
Syntax
mask: <mask-layer>
Values
- <mask-layer>
- Where
<mask-layer> = <mask-reference> <masking-mode>?
Examples
The url points to a <mask> element that is used as mask.
/* mask-reference via a url */
img {
mask: url(#masking);
}
/* Two mask layers (both references to mask images) that are combined with the 'add' compositing mode. */
img {
mask: url(mask-image1.png) add, url(mask-image2.png);
}
Related specifications
- CSS Masking Level 1
- W3C Last Call Working Draft
- CSS Masking Level 1
- W3C Editor’s Draft