Shader based rounded rectangle for ui

I created this small shader that renders rounded rectangles for ui. Some notable features are:

  • Set corner radius
  • Border, with thickness
  • Built in shadows, including soft shadows
  • Sprite support
  • Default, URP and HDRP support

It’s based on the buildin Image component so it also shares most of the features from that like masking, button tint, button sprite swap etc.

Watch the video below for a demonstration:

Download here:

How to use:

  • Place the folder “ProceduralUIShapes” somewhere in you asset folder
  • Right click on the canvas in the Hierarchy and select UI -> RoundedRect
  • Make sure that the shader channels TexCoord1, -2 and -3″ are enabled on the canvas component under “Additional Shader Channels”