Fix: Unity CanvasGroup Alpha Not Fading Children

Here is how to fix Unity UI panels where the parent CanvasGroup alpha animates from 1 to 0 but some children stubbornly stay fully opaque. You set up a fade-out, the panel fades, but the title text and a couple of icons remain at full alpha. The cause is almost always nested CanvasGroups with Ignore Parent Groups blocking the multiplication chain.

The Symptom

A panel under a CanvasGroup fades smoothly when you tween alpha. Some child elements (icons, special text, a hero image) do not fade. They remain at full alpha until you toggle the parent inactive. Inspecting the children shows other CanvasGroups present.

What Causes This

Nested CanvasGroup with Ignore Parent Groups. Unity walks up the parent chain accumulating alpha multiplications. A CanvasGroup with the Ignore Parent Groups checkbox stops the walk — it uses only its own alpha, ignoring everything above.

Custom UI shader without vertex color. Default UI shaders multiply v.color (vertex color carrying the cumulative alpha) into the final output. Custom shaders that omit this lose the alpha.

World Space canvas with depth-only material. Some custom worldspace UI materials use opaque rendering, which does not honor alpha at all.

Image color manually overridden. If a script sets the Image color’s alpha each frame, it overrides the CanvasGroup multiplication post-bake.

The Fix

Step 1: Remove unnecessary nested CanvasGroups. Each CanvasGroup is a render boundary. If you only have it for fade purposes, the parent’s CanvasGroup is enough — remove the child’s.

Step 2: Uncheck Ignore Parent Groups. If a child needs its own CanvasGroup (for example, to be interactable independently), keep it but ensure Ignore Parent Groups is unchecked. Alpha then propagates through.

Step 3: For custom shaders, sample vertex color.

// Shader fragment
fixed4 frag(v2f i) : SV_Target
{
    fixed4 col = tex2D(_MainTex, i.uv);
    col *= i.color;            // pulls in CanvasGroup alpha
    return col;
}

Without the multiplication, your custom material renders at full opacity regardless of CanvasGroup.

Step 4: For per-Image overrides, fade by CanvasGroup only.

// Avoid: per-Image alpha override
img.color = new Color(1, 1, 1, alphaValue);

// Prefer: drive a single CanvasGroup
canvasGroup.alpha = alphaValue;

Per-Image overrides are common patterns from older code. They fight CanvasGroup. Replace them with one CanvasGroup at the panel root.

Step 5: Verify TextMeshPro inherits. TMP labels honor CanvasGroup alpha by default. If they do not in your project, the TMP material may have been replaced with a custom one that omits vertex color. Reset to TMP_Default Material.

Animator Approach

For complex sequences, animate the CanvasGroup alpha from an Animator clip rather than tweaks per Image. The single property fades the entire group:

// Single curve
Property: m_AnchoredPosition.x  -- skip
Property: CanvasGroup.alpha  -- 0 -> 1 over 0.3s

One channel, predictable behavior, no fighting between Images.

“CanvasGroup multiplies down the chain unless a child says otherwise. Find the child that says otherwise.”

Related Issues

For UI button click issues, see UI Button Not Responding. For raycaster blocking, see Raycaster Blocking Clicks.

Find the rogue Ignore Parent Groups child. Remove or unset it. The fade reaches everyone.