Mask image is pretty handy

Often overlooked, the mask-image property can be a simple way to inject some character into your web design work.


We’ve been working on a pretty cool client project recently that’s got some fun branding which required some image masking.

Y’know, this sorta thing:

See the Pen Mask image by piccalilli (@piccalilli) on CodePen.

Code language
css
.masked-image {
  mask-image: url(https://assets.codepen.io/174183/mask.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
}

The clip-path property could be useful, but we found mask image served our need for for high levels of theming and unpredictability really well.

You can repeat the mask for some pretty cool effects too. This is the default behaviour, unless you specify mask-repeat: no-repeat. Just like with background images!

See the Pen Mask image with repeat by piccalilli (@piccalilli) on CodePen.

Code language
css
.masked-image {
  mask-image: url(https://assets.codepen.io/174183/repeat-mask.svg);
  mask-size: 10px 10px;
}

Also, you don’t have to use an SVG! Check out this example that uses a brush texture PNG:

See the Pen Mask image with PNG by piccalilli (@piccalilli) on CodePen.

Code language
css
.masked-image {
  mask-image: url(https://assets.codepen.io/174183/brush.png);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
}

You can add more than one mask too which is enhanced with the associated mask-composite property, allowing you to add, subtract, intersect or exclude masks, much like Pathfinder in Illustrator.

For example, here, we’re excluding the rectangle mask from the circle mask:

See the Pen Mask image with exclusion composite by piccalilli (@piccalilli) on CodePen.

Code language
css
.masked-image {
  mask-image: url(https://assets.codepen.io/174183/circle-mask.svg),
    url(https://assets.codepen.io/174183/rectangle-mask.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
  mask-composite: exclude;
}

And here, we’re subtracting the rectangle mask from the circle mask:

See the Pen Mask image with subtraction composite by piccalilli (@piccalilli) on CodePen.

Code language
css
.masked-image {
  mask-image: url(https://assets.codepen.io/174183/circle-mask.svg),
    url(https://assets.codepen.io/174183/rectangle-mask.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
  mask-composite: subtract;
}

Wrapping up permalink

Masking, it’s easy with CSS! It’s not something I see as often as I hoped on the web either, so hopefully, this little post will inspire you to get creative with masks. You can also read more on mask-image, mask-composite and the mask shorthand.

Made something cool already? Let us know, because The Index is always on the look out for cool stuff to share 👀


Demo image by Harry Holder on Unsplash