Mask image is pretty handy

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:

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

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

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

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

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

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