How to mask UI elements in Unity

Objective: Talk about how we can mask images.

In Unity we can put an invisible image above other UI elements and once those elements move behind that image it’ll appear, this is called masking. To set this up we will need to create two images in the Hierarchy.

We can drop an in image to both of them.

On the one I created named Mask, we will add a Mask Component onto it.

If you have the images side by side as shown above and the second image is a child to the mask, you will see the image disappear.

On the Mask image, we can disable Show Mask Graphic.

Now we can drag our image behind the mask and it’ll appear.

We could also disable our image on Mask object and add Rect Mask 2D.

We can use the Padding to change the size of the Mask. The Softness can add a blur to the edge of the mask.

This is how masking can be done in Unity. Thanks for reading and have a wonderful day!