This page is Not Ready

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

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

CSS Object Model Property
:

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