Gradient generator
Build a CSS linear/radial gradient from 2+ hex colors, and optionally emit N discrete hex stops. Interpolation is linear in sRGB, not perceptual (that needs OKLCH, which needs chroma.js/culori, not available here). Runs on your device.
Runs on your device. The file is never uploaded.
Gradient generator turns two or more hex values into a CSS linear-gradient or radial-gradient line with the stops spread evenly. steps defaults to 0, the CSS line alone; a higher number also samples that many discrete hex stops along the blend. Every channel is blended linearly in sRGB, so two saturated hues can meet in a muddy middle.
Questions
What does it produce?
A single CSS gradient line, ready to paste. The linear type gives something like linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%), with the stops spread evenly and their percentages rounded to whole numbers. The radial type gives radial-gradient(circle, ...) and ignores the angle, because a circle does not have one.
How many colors can I give it?
Two or more, comma separated, each a six-digit hex value with or without the #. Fewer than two is refused with "need at least 2 colors, comma-separated", and anything that is not six hex digits is named in the error as not a 6-digit hex color. Whitespace around each entry is trimmed for you.
What does the steps option do?
It also emits N discrete hex colors sampled along the gradient. 0, the default, gives the CSS line only. 1 gives the first color. Anything higher spaces the samples evenly from the first color to the last, interpolating within whichever pair of stops each sample falls between. A value that is not a whole number of zero or more is refused.
Is the blend perceptually even?
No. Each channel is interpolated linearly in sRGB, which is what CSS itself does by default. A blend between two saturated colors can therefore look darker or muddier in the middle than you expect. Perceptual interpolation would need OKLCH and a color library this tool does not have, so it was not faked.
Can I set the angle on a radial gradient?
The angle applies to linear gradients only. It is written into the CSS as you typed it, so 90 becomes 90deg, and negative values work. For radial output the shape is fixed to circle and the angle is dropped, so changing it has no effect on the result.