CSS Advanced

CSS Masking

CSS masking hides or reveals parts of an element based on the alpha channel of a mask image or gradient. It is perfect for fading edges, cutout text and shaped reveals. This guide covers mask-image and its companion properties with live examples.

What Is CSS Masking?

A mask defines which pixels of an element are visible. Where the mask is opaque, the element shows through; where the mask is transparent, the element is hidden. The mask itself can be a gradient, an SVG, or a PNG with an alpha channel.

.el {
  mask-image: linear-gradient(to bottom, black, transparent);
  /* Older WebKit still needs the prefix */
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
}

ℹ️

Many browsers still require the -webkit- prefix for mask properties. Declare both the prefixed and unprefixed versions for the widest support.

Fading an Edge With a Gradient Mask

The most common use of masking is fading an image out to transparent at one edge, which is impossible with opacity alone because opacity affects the whole element evenly.

Run this — the image fades out at the bottom

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .fade {
    width: 260px;
    display: block;
    -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent);
    mask-image: linear-gradient(to bottom, black 55%, transparent);
  }
  body { background: #fef3c7; }
</style>
</head>
<body>
  <img class="fade" src="https://picsum.photos/id/1024/260/180" alt="Fading image">
</body>
</html>

Companion Properties

Property	Purpose	Example
mask-image	The mask source (gradient or image)	linear-gradient(black, transparent)
mask-size	Size of the mask, like background-size	contain, cover, 40px
mask-repeat	Whether the mask tiles	no-repeat, repeat
mask-position	Where the mask sits	center, top left
mask-mode	Use alpha or luminance	alpha, luminance

A Circular Spotlight Reveal

A radial gradient mask reveals a soft circle and hides the rest, producing a vignette or spotlight effect.

Run this — radial spotlight mask

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .spot {
    width: 240px;
    height: 160px;
    object-fit: cover;
    -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 72%);
    mask-image: radial-gradient(circle at center, black 40%, transparent 72%);
  }
  body { background: #0f172a; }
</style>
</head>
<body>
  <img class="spot" src="https://picsum.photos/id/1039/240/160" alt="Spotlight image">
</body>
</html>

💡

Masks use only the alpha (transparency) channel by default, so the colour of a gradient does not matter — only whether it is opaque or transparent. Use black-to-transparent for clarity.

⚠️

A mask clips visible pixels but does not change the layout box. The element still occupies its full size for surrounding content and click targets.

Key points

mask-image hides parts of an element based on the mask's alpha channel.
Opaque areas of the mask show the element; transparent areas hide it.
Gradient masks fade edges — something opacity cannot do selectively.
mask-size, mask-repeat and mask-position mirror the background-* properties.
Include the -webkit- prefixed versions for broad browser support.