Gradient Generator

Pick a type, then a direction: the arrows point a linear gradient that way, set where a conic one starts, and move the center of a radial one. Type any angle from 0 to 360 in the middle box; 0 points up and 90 points right. The arrow keys step it by 1, or by 15 with Shift.

Each color has a hex code and a position from 0 to 100 percent along the gradient. The colors always run in order of position, so typing a smaller number moves a color earlier. Two colors at the same position make a hard edge. You can use 2 to 5 colors.

The CSS starts with one solid color, the middle of the gradient, for anything that cannot draw gradients. OKLCH blending mixes colors in a space where equal steps look equal, which avoids the gray, muddy middle a plain blend of two opposite colors can have; a plain version comes first as a fallback. The SVG is 800 by 400 and imitates OKLCH with extra stops; SVG has no conic gradients.

Random keeps the type and the number of colors and picks new colors and a new angle. Space does the same, unless you are typing in a field. Undo steps back through your last 20 changes. Your gradient and the ones you save stay on this device only.