CSS Masking

CSS Masking

Mask out parts of an element using another image (PNG) or a gradient.

mask-image

img {
  mask-image: url("mask.png");    /* transparent areas hide the image */
}

The mask's white/alpha keeps content; black/transparent hides it.

Gradient masks

Fade the edges without any file:

.photo {
  mask-image: linear-gradient(to bottom, black, transparent);
}

Mask via alpha (default)

mask-mode: alpha uses the image's alpha channel.

Mask shorthand parts

mask-image, mask-repeat, mask-position, mask-size, work like background!

clip-path vs mask

• clip-path, hard geometric cut.
• mask, soft alpha fade, image-driven.

TL;DR

• mask-image uses an image/gradient to hide parts.
• Black/transparent = hidden; white = shown.
• Gradient masks create nice fades.
• Use for portrait blends and edge fading.