Front-end education for the real world. Since 2018.

— From set.studio

Mask image is pretty handy

Published:

Written by: Andy Bell

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

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