The mask-composite property specifies how multiple mask layers combine — via Porter-Duff compositing operators. Applies when multiple mask images are stacked..intersect-mask {
mask-composite: intersect;
}.punch-hole {
mask-image: linear-gradient(black, black), radial-gradient(circle, transparent 30%, black 30%);
mask-composite: subtract;
}addAdditive compositing: mask layers are added together (default value). Visible area = union of layers.subtractSubtractive compositing: the layer subtracts from layers below it.intersectIntersection compositing: only the area common to all layers is visible.excludeExclusion compositing: areas masked by exactly one layer are visible (XOR).CSS Masking Module Level 1Editor's DraftW3CMDNShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationsourcesvisual demonstrationpreviousnext
