PLAY CSS
jaen

Effects

mask-composite

mask-composite sets how several stacked mask layers combine. Add, subtract, keep only the overlap or remove only the overlap, and make new shapes out of two.

Syntax

<compositing-operator>#

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

Preview

Presets
Drag the bottom-right corner to resize

Code

.box {
  background: linear-gradient(
    135deg,
    #88d1c7,
    #77a7d7,
    #eaac3a
  );
  mask-image:
    radial-gradient(circle at 38% 50%, #000000 0 34%, #00000000 34.5%),
    radial-gradient(circle at 62% 50%, #000000 0 34%, #00000000 34.5%);
  mask-composite: subtract;
}

Controls

mask-compositesubtract
mask-composite

About

Four values

  • add: the initial value. The element shows wherever either layer does.
  • subtract: removes from the upper layer the part covered by the layers below.
  • intersect: keeps only where the upper and lower layers overlap.
  • exclude: removes only the overlap.

Which layer is on top

Of the comma-separated images in mask-image, the first is the topmost layer. mask-composite sets how each layer combines with everything below it, so the value for the bottom layer is never used. In the preview here the left circle is the upper layer and the right one the lower, so subtract leaves a crescent: the left circle minus the right.

Watch out

  • Separate values with commas to set each layer. With fewer values than layers, the list repeats.
  • The old -webkit-mask-composite uses different names: source-over for add, source-out for subtract, source-in for intersect and xor for exclude.
  • The preview here stacks two circle gradients, offset left and right, in mask-image.

References

MDN Web Docsmask-compositeSpecificationCSS Masking Module Level 1Can I usemask-composite

Comments

PLAY CSS