CSS Masking

What mask-image Does

mask-image applies an image (or gradient) as a stencil over an element: fully opaque areas of the mask keep the element fully visible, fully transparent areas hide it completely, and partially transparent areas make the element partially visible.

Unlike a background image, the mask's own pixel colors are ignored, only its alpha channel matters.

Example: What mask-image Does

<style>
.box {
  width: 150px;
  height: 150px;
  background: crimson;
  mask-image: radial-gradient(circle, black 50%, transparent 70%);
}
</style>
<div class="box"></div>

mask-image vs clip-path

clip-path only supports hard geometric edges (a shape is either fully inside or fully outside the clip region, no partial transparency), while mask-image supports smooth, soft-edged transitions because it can use any grayscale or alpha gradient -- masking is the right tool when you need a fade, clip-path when you need a crisp cut.

Example: mask-image vs clip-path

<style>
.masked {
  width: 100px;
  height: 100px;
  background: blue;
  mask-image: linear-gradient(black, transparent);
}
.clipped {
  width: 100px;
  height: 100px;
  background: green;
  clip-path: circle(50%);
}
</style>
<div class="masked"></div>
<div class="clipped"></div>

mask-size and mask-position

mask-size and mask-position control the scaling and placement of the mask image, using the same syntax and keywords (cover, contain, percentages) as background-size and background-position -- letting a mask be scaled independently of the element it's applied to.

Example: mask-size and mask-position

<style>
.box {
  width: 200px;
  height: 100px;
  background: orange;
  mask-image: url('https://placehold.co/50x50');
  mask-size: 50px;
  mask-position: center;
}
</style>
<div class="box"></div>

mask-repeat

mask-repeat controls whether the mask image tiles across the element, works exactly like background-repeat, and is useful for applying a small repeating pattern (like a dot-grid or diagonal-stripe mask) across a larger surface rather than stretching one mask image.

Example: mask-repeat

<style>
.box {
  width: 200px;
  height: 100px;
  background: teal;
  mask-image: url('https://placehold.co/20x20');
  mask-repeat: repeat;
}
</style>
<div class="box"></div>

Combining Multiple Masks and Fading Edges

Multiple comma-separated mask-image values layer like multiple background images, and a very common real-world pattern is using a linear-gradient mask to fade an image or long block of text smoothly into transparent at its edges, avoiding a harsh visual cutoff.

Example: Combining Multiple Masks and Fading Edges

<style>
.box {
  width: 300px;
  height: 100px;
  background: url('https://placehold.co/300x100');
  mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
}
</style>
<div class="box"></div>