# Using ShaderGraph for UI elements with transparency

I am trying to design some UI elements using shader graph. In this case specifically a lifebar that is transparent where empty.

For a normal lifebar with a filled and empty color I got it working without much issue. I created my shader using an unlit model, and set it to a material. I set the material on a raw image, and then added it to a canvas.

Now I want to create a lifebar with transparency. It i make the shader transparent, I just get a black box. If i make it opaque i can see the shader, but the transparent (alpha blended) sections of the image are just black. I cannot find any settings to fix this. She shader looks fine outside of UI with the transparency working.

Is there a way to make raw images on a shadergraph shader support transparency even if it is just yes/no per pixel transparency?
Is a raw image the correct way to use a shader on UI?

It tends to leave a jagged edge, though, which is one of the reasons I created these shaders a number of years ago. It treats that boundary a little more fuzzily so that any imperfections in the texture are blurred out, as well as allowing for edges that aren't completely hard. I tend to get the best results with a blend value of about 0.02; small enough that some blurring occurs, but not so strongly that the data precision (i.e. the readability of the graphic) is lost. $2 asset is$2 because that's the lowest non-free price and anyone with understanding of HSLS can create the included shaders themselves in about an hour.