CSS Gradient Generator
Two or three stops, any angle, and the CSS to paste. Preview updates as you type.
CSS
—
Preview
Worked example
135deg runs from the top-left corner toward the bottom-right. Two colours at the same position produce a hard edge; that is how you get stripes without a repeating gradient.
Gradients are cheap visually and expensive to tune by hand — the interpolation happens in sRGB by default, which is why a gradient from blue to yellow passes through a muddy grey rather than a clean transition.
Avoiding the grey middle
Choose endpoints that share a hue, or add a middle stop to steer the path. Interpolating in oklab produces perceptually even transitions, but browser support for in oklab is still uneven enough that most production CSS adds a third stop instead.