CSS mask-composite property

Description

CSS mask-composite property defines multiple composite operations to combine multi mask layers.

The first url layer is at the top i.e. close to the user. The last url is at the bottom of all the layers i.e. far away from the user.

In the demo, the circle is closer to the user than the square shape. Then the source layer is the circle while the square is the destination layer.

Syntax

mask-image : add | subtract | intersect | exclude | clear | copy | destination-atop | destination-in | destination-out | destination-over | source-atop | source-in | source-out | source-over | xor

Property values

addDefault

The source layer is placed over the target layer.

mask-composite: add;

subtract

The destination mask layer will be subtracted from the source layer and then only the remaining source layer is visible.

mask-composite: subtract;

intersect

Only the intersected portion of both layers is visible.

mask-composite: intersect;

exclude

It is opposite to that of 'intersect' i.e. the portions of both layers that don't intersect are visible.

mask-composite: exclude;

clear

It does not enable any layer.

mask-composite: clear;

copy

Only the source layer is visible.

mask-composite: copy;

source-over

It places the source layer over the destination layer.

mask-composite: source-over;

destination-over

It places the destination layer over the source layer.

mask-composite: destination-over;

source-in

represents only the source area that overlaps the destination layer.

mask-composite: source-in;

destination-in

represents only the destination area that overlaps the source layer.

mask-composite: destination-in;

source-out

It represents the portion of source layer that falls outside the overlapping area.

mask-composite: source-out;

destination-out

It represents the portion of destination layer that falls outside the overlapping area.

mask-composite: destination-out;

source-atop

It represents both the overlapping area and destination area.

mask-composite: source-atop;

destination-atop

It represents both the overlapping area and source area.

mask-composite: source-atop;

xor

The non-overlapping regions of both the source and destination layers.

mask-composite: xor;

Applicable to

It applies to all elements

#CSS digger
Was this article helpful?

 
×

Ctrl+D