LinearGradient - is there any way to improve transition smoothness

Vega Open Beta Q&A
1
  1. Summary

There is an issue with color transition in LinearGradient when a solid background color is placed behind the gradient. The transition between colors appears visually uneven and not smooth.

App Name: Joyn

Bug Severity
Select one that applies

Impacts operation of app
Blocks current development
Improvement suggestion
Issue with documentation (If selected, please share the doc link and describe the issue)
Other

Screenshot 2025-12-18 at 13.32.14
Screenshot 2025-12-18 at 13.32.141682×1618 78.7 KB


import LinearGradient from '@amazon-devices/react-linear-gradient';

...

{isMenuFocused ? <GradientBackground {...GRADIENT_PROPS} /> : null}

...

export const GRADIENT_PROPS = {
  colors: ['#00191CFC', '#00191CE6', '#00000000'],
  locations: [0.1, 0.62, 1],
  start: { x: 0, y: 0 },
  end: { x: 1, y: 0 },
};

  1. Observed Behavior

When a LinearGradient is rendered on top of a solid background color, the color transition is not smooth. Instead of a seamless gradient, visible color banding/steps can be observed during the transition. This results in a noticeable visual artifact that degrades the overall UI appearance (see attached screenshot).

Screenshot 2025-12-18 at 13.32.14
Screenshot 2025-12-18 at 13.32.141682×1618 101 KB

  1. Expected Behavior

The gradient should blend smoothly into the underlying solid color without visible banding or abrupt transitions. Color interpolation should appear continuous and visually seamless.

The issue is especially noticeable on flat backgrounds and larger gradient areas, where the gradient is expected to fade naturally into the solid color.

4. Summary

Could you please recommend me how to improve the transition smoothness?
Or could you mind to validate if it is possible to improve inside the library the amount of transition steps on big gradinents (height 1080px; width 1054px)?

3

Hi @Yeldar_Kossynbay,

Thank you for your question about improving LinearGradient transition smoothness.

Our team is looking into this and will provide an update as soon as we have more information. In the meantime, you might want to try the following potential solutions:

Option 1 - Convert to RGBA Format (minimal change):

export const GRADIENT_PROPS = {
  colors: ['rgba(0, 25, 28, 0.988)', 'rgba(0, 25, 28, 0.902)', 'rgba(0, 0, 0, 0)'],
  locations: [0.1, 0.62, 1],
  start: { x: 0, y: 0 },
  end: { x: 1, y: 0 },
};

Option 2 - Add More Color Stops:

export const GRADIENT_PROPS = {
  colors: [
    'rgba(0, 25, 28, 0.988)',
    'rgba(0, 25, 28, 0.95)',
    'rgba(0, 25, 28, 0.902)',
    'rgba(0, 12, 14, 0.5)',
    'rgba(0, 0, 0, 0)',
  ],
  locations: [0.1, 0.35, 0.62, 0.8, 1],
  start: { x: 0, y: 0 },
  end: { x: 1, y: 0 },
};

If you’d like to test these approaches, I’ve attached an example code snippet (attached: GradientComparison.tsx (4.6 KB)) that may help you compare the different gradient implementations on your Vega hardware.

Please test these solutions and let us know if they resolve the banding issue.

Reference: Vega LinearGradient API Documentation

Thanks for helping us improve the Vega platform.

Warm regards,
Aishwarya

4

Hi Amen, unfortunately suggested options did not solved the problem.