CSSmask-composite Property
Example
Show the different values for themask-composite property:
.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-image: url(img_rectangle.svg), radial-gradient(transparent 50%, black);
}
.mask1 {
mask-composite: add;
}
.mask2 {
mask-composite: subtract;
}
.mask3 {
mask-composite: intersect;
}
.mask4 {
mask-composite: exclude;
}
Try it Yourself »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-image: url(img_rectangle.svg), radial-gradient(transparent 50%, black);
}
.mask1 {
mask-composite: add;
}
.mask2 {
mask-composite: subtract;
}
.mask3 {
mask-composite: intersect;
}
.mask4 {
mask-composite: exclude;
}
Definition and Usage
Themask-composite property specifies a compositing operation used on the current mask layer with the mask layers below it.
| Default value: | add |
|---|---|
| Inherited: | no |
| Animatable: | no.Read aboutanimatable |
| Version: | CSS Masking Module Level 1 |
| JavaScript syntax: | object.style.maskComposite="intersect" |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| mask-composite | 120 | 120 | 53 | 15.4 | 106 |
CSS Syntax
mask-composite: add|subtract|intersect|exclude|initial|inherit;
Property Values
| Value | Description |
|---|---|
| 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 |
| initial | Sets this property to its default value.Read aboutinitial |
| inherit | Inherits this property from its parent element.Read aboutinherit |
Related Pages
CSS reference:mask property
CSS reference:mask-clip property
CSS reference:mask-image property
CSS reference:mask-mode property
CSS reference:mask-origin property
CSS reference:mask-position property
CSS reference:mask-repeat property
CSS reference:mask-size property
CSS tutorial:CSS Masking
