CSS mask-composite property

Previous Page mask-clip
Next Page mask-image

Course Recommendation:

Display Definition and Usage

Attribute specifies the composite operation used by the current mask layer and the mask layer below it.

Example Display mask-composite

Different Values of Properties:
  .masked {
  width: 200px;
  height: 200px;
  mask-repeat: no-repeat;
  mask-size: 100%;
  background: blue;
  -webkit-mask-image: url(img_rectangle.svg), radial-gradient(transparent 50%, black);
mask-composite: exclude;
mask-image: url(img_rectangle.svg), radial-gradient(transparent 50%, black);
  .mask1 {
mask-composite: exclude;
mask-composite: add;
  .mask2 {
mask-composite: exclude;
mask-composite: subtract;
  .mask3 {
mask-composite: exclude;
mask-composite: intersect;
  .mask4 {
mask-composite: exclude;

}

Try It Yourself

CSS Syntax

mask-composite: add|subtract|intersect|exclude|initial|inherit;

Attribute Value	Value
Default Value:	Description
Source mask layer placed on top of the target mask layer.	subtract
Source mask layer placed outside the target mask layer.	intersect
Source mask layer and target mask layer overlap part replace the target mask layer.	exclude
Sets this property to its default value. See also	Source mask layer and target mask layer do not overlap areas merge. Sets this property to its default value. See alsoAnimation-related properties
Inherits this property from its parent element. See also	initial Inherits this property from its parent element. See alsoAnimation-related properties

inherit

Technical Details	Default Value:
add	Inheritance:
No	Animation production:Not supported. See also:Animation-related properties
.	Version:
CSS Masking Module Level 1	JavaScript Syntax: