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. Use more stops, closer together. A gradient with stops at 0, 25, 50, 75 and 100 percent gives you control over the whole journey instead of letting the browser improvise the middle. Hard stops, two stops at the same percentage, give you a clean split instead of a blend, which is how striped and two-tone backgrounds are made.

3. Change the interpolation space. Modern CSS lets you write linear-gradient(in oklch, #2563eb, #ec4899), and OKLCH walks through vivid colors instead of grey. It looks dramatically better. The catch is older browsers: keep a plain RGB gradient line above it as a fallback, and browsers that understand the new syntax will use the better one.

Angle and shape matter more than color

Most gradients people dislike are not bad colors, they are bad geometry. A 90 degree gradient across a wide hero banner stretches the blend so thin that most of the banner is one flat color. A 135 degree diagonal keeps the blend visible. A radial gradient centered on the content draws the eye inward, which is why it works for cards and modals. A conic gradient starting at the top spins color around a point, which is great for pie charts and progress rings and terrible for backgrounds.

Pick the type for the job: linear for banners and buttons, radial for spotlights and cards, conic for rings and charts.

The workflow that saves time

Write gradients by hand and you will spend twenty minutes tweaking percentages and reloading. Use a visual builder instead: pick the type, drag the stops, set the angle, and copy the finished CSS. I built one that also gives you the Tailwind class and a PNG or SVG export for when the design needs an image instead of code: https://www.theutilityhub.online/tools/css-gradient-generator

One more habit worth stealing: never ship a gradient without a fallback background color. Put background-color with your first stop color on the line above the gradient. If anything fails, the page still shows a sensible solid color instead of white.

The grey middle was never your taste failing. It was RGB interpolation doing its job. Give it a middle stop or a better color space, and the gradient you imagined is the one that shows up.