UI Masking

Video about it:

If you try to use the asset material on a masked UI element such as the ones contained on a Scroll view you’ll see that the object won’t get masked.

In this image we can see how we have a UI image inside of a Scroll View and it’s not getting masked (it should only be visible inside the gray area). This happens because elements that need to be masked have a unique Stencil configuration, this configuration is not included on the default material since it would bring problems to the regular use cases.

But you can change the shader variant with the shader component and the Image will get masked:

Sometimes for this to take effect in the scene you’ll need to Save the scene (Ctrl+S). Same happens when modifying shader properties through the inspector. Another caveat is that, as already mentioned in the Scripting section above you will want to use Image.materialForRendering instead of Image.material when scripting UI Masked UI Images.

*For this to work the Stencil buffer must be enabled. In the Built-In pipeline is enabled by default in most platforms. In case you are building for Android you can go to Player Settings, Resolution and Presentation and make sure that the Stencil isn’t disabled. In URP you need to enable the stencil in the Pipeline Settings asset: