CSS mask-composite Property
Example
Show the different values for the mask-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 »
Definition and Usage
The mask-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 about animatable |
| 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 about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
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
