mask & mask-image

mask-image uses another image — a gradient, a PNG with transparency, or an SVG — to control which parts of an element are visible. Wherever the mask is opaque, the element shows through fully; wherever it's transparent, the element is hidden; and anywhere in between, the element is partially see-through. It's the same idea as a layer mask in an image editor, applied live in the browser to any element.

Gradient masks — fading an element out

CSS

/* Fade the right edge of a horizontally-scrolling list */
.scroll-row {
  mask-image: linear-gradient(
    to right,
    black 85%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    black 85%,
    transparent 100%
  );
}

/* Fade an image out at the bottom, into the page background */
.hero-image {
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

In a mask gradient, black (or any opaque color) means "fully visible" and transparent means "fully hidden" — only the alpha channel matters, the actual hue is ignored. This makes soft edge fades trivial without needing a pre-baked faded image asset.

Image/SVG masks — custom-shaped reveals

CSS

/* Reveal a photo only through a star-shaped SVG mask */
.badge-photo {
  width: 200px;
  height: 200px;
  mask-image: url('/masks/star.svg');
  -webkit-mask-image: url('/masks/star.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

Here the SVG's own shape becomes the visibility map — the photo only shows through wherever the star shape is opaque, giving a custom silhouette without needing to pre-crop the image itself.

mask vs. clip-path

	clip-path	mask-image
Edges	Hard geometric edges only (polygon, circle, ellipse, inset)	Supports soft, gradient, partially-transparent edges
Source	A defined geometric shape or SVG path	A gradient, raster image, or SVG — anything with an alpha channel
Best for	Cutting an element into a precise geometric shape	Fades, feathered edges, photographic/textured reveal shapes

Both hide parts of an element without touching its layout box — the difference is that clip-path only knows hard shapes, while mask-image can express any gradient of partial transparency. See the clip-path page for the geometric-shape sibling of this feature.

Tip

Always pair mask-image (and mask-* properties generally) with the -webkit- prefixed equivalents — Safari still requires the prefix for full mask support even in fairly recent versions.