CSS Gradient Generator

In short A CSS gradient is a function, not an image: linear-gradient for a straight sweep, radial-gradient for one that spreads from a point, and conic-gradient for one that rotates around it. They scale to any size, cost nothing to download and can be animated, which is why they replaced the sliced background images they used to imitate. The failure everyone hits at least once is the grey dead zone. CSS interpolates between stops in sRGB, and the straight line between two opposite hues passes through the desaturated middle of the colour space — so blue to orange goes through a muddy grey, and the gradient looks dirty rather than vivid. Two fixes: keep the two hues close together on the colour wheel, or add a deliberate mid stop in a colour you choose rather than the one the maths picks. The other thing worth knowing is that a gradient with no explicit angle runs top to bottom, and that percentages position stops along the line rather than across the element. For banding on large subtle gradients, a very slight noise overlay hides it better than adding more stops.