Web/CSS/mask-composite

The mask-composite CSS property represents a compositing operation used on the current mask layer with the mask layers below it.

/* Keyword values */
mask-composite: add;
mask-composite: subtract;
mask-composite: intersect;
mask-composite: exclude;

/* Global values */
mask-composite: inherit;
mask-composite: initial;
mask-composite: unset;

Syntax

One or more of the keyword values listed below, separated by commas.

Values

For the composition the current mask layer is referred to as source, while all layers below it are referred to as destination.

add: The source is placed over the destination.
subtract: The source is placed, where it falls outside of the destination.
intersect: The parts of source that overlap the destination, replace the destination.
exclude: The non-overlapping regions of source and destination are combined.

Formal definition

Initial value	`add`
Applies to	all elements; In SVG, it applies to container elements excluding the `defs` element and all graphics elements
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

<compositing-operator>#where <compositing-operator> = add | subtract | intersect | exclude

Examples

Compositing mask layers with addition

CSS

#masked {
  width: 100px;
  height: 100px;
  background-color: #8cffa0;
  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg),
              url(https://mdn.mozillademos.org/files/12676/star.svg);
  mask-size: 100% 100%;
  mask-composite: add; /* Can be changed in the live sample */
}

HTML

<div id="masked">
</div>
<select id="compositeMode">
  <option value="add">add</option>
  <option value="subtract">subtract</option>
  <option value="intersect">intersect</option>
  <option value="exclude">exclude</option>
</select>

JavaScript

var clipBox = document.getElementById("compositeMode");
clipBox.addEventListener("change", function (evt) {
  document.getElementById("masked").style.maskComposite = evt.target.value;
});

Result

Specifications

Specification	Status	Comment
CSS Masking Module Level 1The definition of 'mask-composite' in that specification.	Candidate Recommendation	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`mask-composite`	Chrome No support No Notes' No support No Notes' Notes' See also `-webkit-mask-composite` for a similar non-standard property that uses different keywords.	Edge No support 18 — 79	Firefox Full support 53	IE No support No	Opera No support No Notes' No support No Notes' Notes' See also `-webkit-mask-composite` for a similar non-standard property that uses different keywords.	Safari No support No Notes' No support No Notes' Notes' See also `-webkit-mask-composite` for a similar non-standard property that uses different keywords.	WebView Android No support No Notes' No support No Notes' Notes' See also `-webkit-mask-composite` for a similar non-standard property that uses different keywords.	Chrome Android No support No Notes' No support No Notes' Notes' See also `-webkit-mask-composite` for a similar non-standard property that uses different keywords.	Firefox Android Full support 53	Opera Android No support No Notes' No support No Notes' Notes' See also `-webkit-mask-composite` for a similar non-standard property that uses different keywords.	Safari iOS No support No Notes' No support No Notes' Notes' See also `-webkit-mask-composite` for a similar non-standard property that uses different keywords.	Samsung Internet Android No support No Notes' No support No Notes' Notes' See also `-webkit-mask-composite` for a similar non-standard property that uses different keywords.

Legend

Full support: Full support
No support: No support
See implementation notes.': See implementation notes.

mask-composite by Mozilla Contributors is licensed under CC-BY-SA 2.5.