mask

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

See full compatibility

The mask attribute is a presentation attribute mainly used to bind a given <mask> element with the element the attribute belongs to.

Note: As a presentation attribute, mask also has a CSS property counterpart: mask. When both are specified, the CSS property takes priority.

You can use this attribute with the following SVG elements:

Example

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <mask id="myMask" maskContentUnits="objectBoundingBox">
    <rect fill="white" x="0" y="0" width="100%" height="100%" />
    <polygon
      fill="black"
      points="0.5,0.2 0.68,0.74 0.21,0.41 0.79,0.41 0.32,0.74" />
  </mask>

  <!--
  Punch a hole in a shape of a star inside the red circle,
  revealing the yellow circle underneath
  -->
  <circle cx="50" cy="50" r="20" fill="yellow" />
  <circle cx="50" cy="50" r="45" fill="red" mask="url(#myMask)" />
</svg>

Since SVG2, the mask attribute is defined as a CSS property and is a shorthand for many other properties: mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size, and mask-composite.

Usage notes

Value	See the CSS property `mask`
Default value	`none`
Animatable	Yes

Specifications

Specification
CSS Masking Module Level 1 # the-mask

Browser compatibility

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`mask`	Chrome – Partial support Chrome 1 – 119 (Release date: 2008-12-11) footnote Partial support footnote While the property is recognized, values applied to it don't have any effect. Chrome – Full support Chrome 1 (Release date: 2008-12-11) prefix , footnote prefix Implemented with the vendor prefix: -webkit- footnote The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard `-webkit-mask-attachment` property. Chrome – Full support Chrome 120 (Release date: 2023-12-05) footnote Full support	Edge – No support Edge 12 – 18 (Release date: 2015-07-29) unknown Support unknown Edge – Partial support Edge 79 – 119 (Release date: 2020-01-15) footnote Partial support footnote While the property is recognized, values applied to it don't have any effect. Edge – Full support Edge 79 (Release date: 2020-01-15) prefix , footnote prefix Implemented with the vendor prefix: -webkit- footnote The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard `-webkit-mask-attachment` property. Edge – Full support Edge 120 (Release date: 2023-12-07) footnote Full support	Firefox – Partial support Firefox 2 – 52 (Release date: 2006-10-24) footnote Partial support footnote Only supports `mask: url(file.svg#mask_id)` or `mask: url(#mask_id)`, where the URL is a reference to an SVG `<mask>` element. Firefox – Full support Firefox 53 (Release date: 2017-04-19) footnote Full support	Opera – Partial support Opera 15 – 105 (Release date: 2013-07-02) footnote Partial support footnote While the property is recognized, values applied to it don't have any effect. Opera – Full support Opera 15 (Release date: 2013-07-02) prefix , footnote prefix Implemented with the vendor prefix: -webkit- footnote The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard `-webkit-mask-attachment` property. Opera – Full support Opera 106 (Release date: 2023-12-19) footnote Full support	Safari – Partial support Safari 3.1 – 15.3 (Release date: 2008-03-18) footnote Partial support footnote While the property is recognized, values applied to it don't have any effect. Safari – Full support Safari 3.1 (Release date: 2008-03-18) prefix , footnote prefix Implemented with the vendor prefix: -webkit- footnote The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard `-webkit-mask-attachment` property. Safari – Full support Safari 15.4 (Release date: 2022-03-14) footnote Full support	Chrome Android – Partial support Chrome Android 18 – 119 (Release date: 2012-06-27) footnote Partial support footnote While the property is recognized, values applied to it don't have any effect. Chrome Android – Full support Chrome Android 18 (Release date: 2012-06-27) prefix , footnote prefix Implemented with the vendor prefix: -webkit- footnote The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard `-webkit-mask-attachment` property. Chrome Android – Full support Chrome Android 120 (Release date: 2023-12-05) footnote Full support	Firefox for Android – Partial support Firefox for Android 4 – 52 (Release date: 2011-03-29) footnote Partial support footnote Only supports `mask: url(file.svg#mask_id)` or `mask: url(#mask_id)`, where the URL is a reference to an SVG `<mask>` element. Firefox for Android – Full support Firefox for Android 53 (Release date: 2017-04-19) footnote Full support	Opera Android – Partial support Opera Android 14 – 79 (Release date: 2013-05-21) footnote Partial support footnote While the property is recognized, values applied to it don't have any effect. Opera Android – Full support Opera Android 14 (Release date: 2013-05-21) prefix , footnote prefix Implemented with the vendor prefix: -webkit- footnote The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard `-webkit-mask-attachment` property. Opera Android – Full support Opera Android 80 (Release date: 2024-01-25) footnote Full support	Safari on iOS – Partial support Safari on iOS 2 – 15.3 (Release date: 2008-07-11) footnote Partial support footnote While the property is recognized, values applied to it don't have any effect. Safari on iOS – Full support Safari on iOS 2 (Release date: 2008-07-11) prefix , footnote prefix Implemented with the vendor prefix: -webkit- footnote The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard `-webkit-mask-attachment` property. Safari on iOS – Full support Safari on iOS 15.4 (Release date: 2022-03-14) footnote Full support	Samsung Internet – Partial support Samsung Internet 1 – 24 (Release date: 2013-04-27) footnote Partial support footnote While the property is recognized, values applied to it don't have any effect. Samsung Internet – Full support Samsung Internet 1 (Release date: 2013-04-27) prefix , footnote prefix Implemented with the vendor prefix: -webkit- footnote The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard `-webkit-mask-attachment` property. Samsung Internet – Full support Samsung Internet 25 (Release date: 2024-04-24) footnote Full support	WebView Android – Partial support WebView Android 3 – 119 (Release date: 2011-02-22) footnote Partial support footnote While the property is recognized, values applied to it don't have any effect. WebView Android – Full support WebView Android 3 (Release date: 2011-02-22) prefix , footnote prefix Implemented with the vendor prefix: -webkit- footnote The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard `-webkit-mask-attachment` property. WebView Android – Full support WebView Android 120 (Release date: 2023-12-05) footnote Full support	WebView on iOS – Partial support WebView on iOS 2 – 15.3 (Release date: 2008-07-11) footnote Partial support footnote While the property is recognized, values applied to it don't have any effect. WebView on iOS – Full support WebView on iOS 2 (Release date: 2008-07-11) prefix , footnote prefix Implemented with the vendor prefix: -webkit- footnote The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard `-webkit-mask-attachment` property. WebView on iOS – Full support WebView on iOS 15.4 (Release date: 2022-03-14) footnote Full support

Tip: you can click/tap on a cell for more information.

Full support: Full support
Partial support: Partial support
: Requires a vendor prefix or different name for use.
: Has more compatibility info.

mask

Example

Usage notes

Specifications

Browser compatibility

Legend

See also