Linear Gradient Blending Issue

[chiefcll]

Add this to test.ts in examples:

const bottomGradient = renderer.createNode({
    width: 1920,
    y: 382,
    height: 698,
    color: 0x00000000,
    shader: renderer.createShader('DynamicShader', {
    effects: [{
        type: 'linearGradient',
        props: {
          stops: [0, 0.5, 1],
          colors: [0x00000000, 0x000000B6, 0x000000DA],
          angle: deg2Rad(0)
        },
      },
    ]}),
    parent: testRoot,
  });

  const leftGradient = renderer.createNode({
    width: 1780,
    height: 1080,
    color: 0x00000000,
    shader: renderer.createShader('DynamicShader', {
    effects: [{
        type: 'linearGradient',
        props: {
          stops: [0, 0.15, 0.3, 0.7, 1],
          colors: [0x000000FF, 0x000000EB, 0x000000B2, 0x00000085, 0x00000000],
          angle: deg2Rad(270)
        },
      },
    ]}),
    parent: testRoot,
  });

It doesn't create a nice blend between the two.

Play around with alpha: 0 on each individually, deleting them, and swapping their order and it changes what is rendered. Individually they work, but together it doesn't.

Alpha 0 bottom gradient:

Remove bottom gradient: