Shader Graph UI Opacity Fade causes black color before disappearing

Hi everyone,

I’m working on a custom Shader Graph for some UI elements (e.g. VFX or stylized particles) that are used inside a Unity Canvas. Everything works fine, except when I try to animate or control the opacity from a parent object (e.g. via CanvasGroup alpha or keyframe animation on a float property).

When I fade the opacity (for example: 1 → 0), the element turns black before disappearing, instead of just fading out cleanly.
It looks like the alpha is working, but the RGB goes dark as the opacity lowers like it’s multiplying with black instead of staying bright and transparent.

My setup:

  • URP with Shader Graph
  • Shader uses Alpha blending (Premultiply/Alpha/Transparent)
  • The UI element is rendered with a custom material
  • The opacity is either controlled by a float property in the shader (_Opacity) or via CanvasGroup (but CanvasGroup doesn’t affect this shader)

Questions:

  1. Is there a correct way to hook up the opacity in Shader Graph to make it behave properly in UI?
  2. How do I prevent the black-out effect when fading opacity?
  3. Should I use Premultiply Alpha or straight Alpha blending in this case?
  4. Any recommended blend modes or node setup for Shader Graph in UI elements?

Thanks in advance for your help! Any visual examples or node setup recommendations are welcome!
Record_2025_05_26_11_53_53_743