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