Create and edit gradients

Adjust the primary CTA background to a horizontal gradient that reads left to right from #0067FF to #00B39F. Update the Button-Primary master so the gradient angle, stops and opacity are identical across desktop, tablet and mobile variants, and verify the gradient renders the same in an exported 2x PNG.

Before I push the new button styles to components, make the gradient review-friendly: put a swatch with the exact hex stops and percents above the component, show the button at the three sizes used in product, and call out any places where contrast with white text drops below AA on smaller buttons so reviewers can approve or request an alternate color pair.

I updated the CTA from a flat color to a two-stop horizontal gradient and the 2x PNG export looks banded on the staging page. The engineers (Hannah) and QA will see this; I don’t know if the issue is the color space, low bit-depth export, or poor stop placement. What is the likely cause and the quickest change I can make in the file to reduce banding for web delivery?

Across several releases our gradients look different in production than in design — banding, shifted stops, and inconsistent angles on mobile. I’m the design lead and this creates needless pixel meetings. What habit should our team adopt when creating and approving gradients, and what export or handoff rule will stop these mismatches?