CSS Masking

Masking Basics

CSS masking lets you control which parts of an element are visible by applying a mask. Think of a mask as a “visibility map” placed on top of an element.

• Visible areas of the mask show the element
• Transparent areas of the mask hide the element

Masking is commonly used for:

• fade effects (soft edges)
• text/image reveals
• creative shapes beyond border-radius and clip-path

mask-image

The main property is mask-image. It can use:

• an image file (PNG/SVG)
• a CSS gradient (linear/radial/conic)

Mask with an image:

.photo {
  -webkit-mask-image: url("mask.png");
  mask-image: url("mask.png");
}

Tip: Use the -webkit- prefixed properties for better browser support.

Mask with a gradient (fade):

.fade {
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}

In gradient masks, opaque parts (black) are visible and transparent parts hide the element.

Mask Size, Position, Repeat

Just like background images, masks have size, position, and repeat controls.

Scale mask to cover:

.photo {
  -webkit-mask-image: url("mask.svg");
  mask-image: url("mask.svg");

  -webkit-mask-size: cover;
  mask-size: cover;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

Common values:

• mask-size: cover – fill the element (may crop mask)
• mask-size: contain – fit inside the element
• mask-repeat: no-repeat – prevents tiling

Masking with Gradients

Gradients are the most practical way to create masks without external image files.

Left-to-right fade:

.fade-x {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 25%, #000 75%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 25%, #000 75%, transparent 100%);
}

Radial spotlight mask:

.spotlight {
  -webkit-mask-image: radial-gradient(circle at center, #000 55%, transparent 75%);
  mask-image: radial-gradient(circle at center, #000 55%, transparent 75%);
}

Conic reveal (creative wipe):

.wipe {
  -webkit-mask-image: conic-gradient(#000 0deg 220deg, transparent 220deg 360deg);
  mask-image: conic-gradient(#000 0deg 220deg, transparent 220deg 360deg);
}

Summary

• Masking controls visibility using mask-image (image or gradient).
• Use mask-size, mask-position, mask-repeat like background controls.
• Gradients are the easiest way to create fades and reveals without assets.
• For broader support, include -webkit-mask-* properties.