How to mask UI Elements in Unity

Masking UI Elements is an incredibly useful tool available to us in Unity. It is also incredibly easy to implement. All we need is two Images and a little bit of work.

We start with two Images, three if we count the Background. Both of these Images are Sprites with unique shapes. In this case, the X is the Mask and the wooden pallet is the Image that will be masked out.

We need to make the Image a Child of the Mask.

On the Mask object, we add the Mask Component.

Now, as we move the Image across the Mask, the Image will only show up where the Mask would be visible. Another way to look at this is that the Image’s Alpha Channel will only be visible where the Mask’s Alpha Channel is.

There is another masking method that we can utilize. The Rect Mask 2D will also work if the shape that we want is rectangular. If we use just a standard Image without a Sprite attached, we can add the Rect Mask 2D Component.

We can then adjust the Padding options to alter the Mask.

We can also add some Softness to blur out the edges.

Now, we can move our Image around to see how our Mask is working.

Lastly, we can turn off the Image Component of our Mask so that we only see the Masked Image.

Now that we have gone over all of that, a practical use for this is this Scrollbar. These Scrollbars each have a series of Images and Text that scroll up and down. Combined with gradient overlays and a Mask, we can achieve the illusion that the numbers are rolling instead of just up and down.

In all actuality the Mask makes the Images disappear when they are not within the viewable area.

Thanks!