Effects
mask-image
mask-image uses the transparency of an image or gradient to let parts of an element show through, for soft fades or pattern-shaped cutouts.
Syntax
<mask-reference>#
<mask-reference> = none | <image> | <mask-source>Preview
Code
.box {
background: linear-gradient(
135deg,
#88d1c7,
#77a7d7,
#eaac3a
);
mask-image: linear-gradient(
to bottom,
#000000 40%,
#00000000
);
}Controls
Drag the markers to move stops
About
Only transparency counts
Where the mask is opaque the element shows as is, where it is transparent the element disappears, and semi-transparent areas let it partly through. The colors themselves don’t matter. This page writes black (#000000) and transparent (#00000000), but red and transparent would give the same result.
The controls here are the same as on the three gradient pages. You can also point url() at an image or an SVG <mask>.
Compared with clip-path
clip-path cuts sharply along a shape, while mask-image can use partial transparency to soften the edge. Neither changes the element’s size in the layout.
Size and repetition
Mask images are laid out like background images. mask-size, mask-position and mask-repeat work like their background-* counterparts, and the mask shorthand combines them. Separate several masks with commas to layer them.