A two color gradient should be simple. You pick a blue and a pink, you write one line of CSS, and the middle comes out grey. Not blue-pink. Grey. Muddy, washed out grey, like someone mixed all the paint together.

That grey middle is not a bug in your code. It is how RGB interpolation works, and once you see it you cannot unsee it.

What the browser actually does

background: linear-gradient(90deg, #2563eb 0%, #ec4899 100%) tells the browser to walk from blue to pink. In RGB space that walk passes through the average of the two colors, and the average of a saturated blue and a saturated pink is a desaturated mauve-grey. The browser did exactly what you asked. You just asked in the wrong color space.

Three fixes, in order of effort:

1. Add a middle stop. Put a vivid color at 50 percent and the gradient has to pass through it. #2563eb 0%, #8b5cf6 50%, #ec4899 100% never goes grey because the midpoint is a real purple, not an average. This is the fastest fix and it works everywhere.

2.…