This page is Not Ready

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

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