The mask-composite CSS property allows us to combine a mask layer image with the mask layers below it.
.element {
mask-composite: subtract;
}When there are multiple mask layer images, they need to be composited into one final mask layer. mask-compositespecifies how mask layers with different shapes are combined into a single image. Think of it like combining layers in an image editing app, like Photoshop, Figma or Sketch, where you have controls that set how the layers are combined.
Or, another way to think about it:
mask-composite: <compositing-operator>#
where
<compositing-operator> = add | subtract | intersect | excludeadd<defs> element and all graphics elements/* 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;For the composition, the mask layer image that the mask-composite value is applied to is the source, while all mask layers below it are the destination.
add: The default value. The mask image layer closer to the user (source) is placed on top of the next mask image layer (destination). The combination is the final mask layer.subtract: The mask image layer closer to the user is placed where it falls outside of the next mask image layer. In other words, the final combination is portions of the destination that don’t overlap the source.intersect: The portions of source that overlap the destination replace the destination. In other words, the final combination is portions of the destination that overlap the source.exclude: The non-overlapping regions of source and destination are combined.initial: Applies the property’s default value, add.inherit: Adopts the mask-composite value of the parent.unset: Removes the current mask-composite from the element.
In the following example, two mask image layers are combined using exclude value:
img {
mask-image: url(circle.svg), url(plus.svg);
mask-size: 150px, 200px;
mask-position: center;
mask-composite: exclude;
}At the time of writing, this example works only in Firefox.
This property can take a comma-separated list of values for mask compositing and the number of values is one value less than the number of mask images specified using mask-image.
In the following example:
And so on for any number of mask layer images. Remember, the first image specified is placed on top of the ones specified after it.
.element {
mask-image: url(circle.png), url(star.png), url(square.png);
mask-composite: exclude, subtract;
}* Edge 18 supported mask-composite before adopting the Blink rendering engine.
.element { mask-clip: padding-box; }
.element { mask-composite: subtract; }
.element { mask-image: url(star.svg); }
.element { mask-mode: alpha; }
.element { mask-origin: content-box; }
.element { mask-position: 20px center; }
.element { mask-repeat: repeat-y; }
.element { mask-size: 200px 100px; }
.element { mask-type: alpha; }