CSS mask-composite property

Property values

addDefault

The source layer is placed over the target layer.

mask-composite: add;

Try it { }

subtract

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

mask-composite: subtract;

Try it { }

intersect

Only the intersected portion of both layers is visible.

mask-composite: intersect;

Try it { }

exclude

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

mask-composite: exclude;

Try it { }

clear

It does not enable any layer.

mask-composite: clear;

Try it { }

copy

Only the source layer is visible.

mask-composite: copy;

Try it { }

source-over

It places the source layer over the destination layer.

mask-composite: source-over;

Try it { }

destination-over

It places the destination layer over the source layer.

mask-composite: destination-over;

Try it { }

source-in

represents only the source area that overlaps the destination layer.

mask-composite: source-in;

Try it { }

destination-in

represents only the destination area that overlaps the source layer.

mask-composite: destination-in;

Try it { }

source-out

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

mask-composite: source-out;

Try it { }

destination-out

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

mask-composite: destination-out;

Try it { }

source-atop

It represents both the overlapping area and destination area.

mask-composite: source-atop;

Try it { }

destination-atop

It represents both the overlapping area and source area.

mask-composite: source-atop;

Try it { }

xor

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

mask-composite: xor;

Try it { }