Question 1

Why does the middle of my gradient look grey?

Accepted Answer

Browsers interpolate in sRGB by default, which desaturates the midpoint between opposing hues. Adding an intermediate color stop, or choosing closer hues, fixes it.

Question 2

Why is there a band when fading to transparent?

Accepted Answer

transparent is really transparent black, so interpolating toward it darkens the midpoints. Use the same color at zero alpha instead, e.g. rgba(255,255,255,0).

Gradient Generator