CSS Masking

Imagine a stencil laid over a can of spray paint: wherever the stencil is solid, paint gets blocked; wherever it's cut away, paint passes through freely. Gray areas on the stencil would let some paint through, partially. CSS masking works exactly like that stencil, using an image or gradient's transparency to decide what parts of an element are visible.

In this page:

What mask-image Does
mask-image vs clip-path
mask-size and mask-position
mask-repeat
Combining Multiple Masks and Fading Edges

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

css

<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

css

<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

css

<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

css

<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

css

<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>

🔒

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS object-position Next Lesson → CSS Math Functions