Gradient Generator

Use the free Gradient Generator to build CSS linear and radial gradients visually.

That is the whole scope of the page. It sits in Color Tools, the group for pick, convert & build palettes. The Gradient Generator only does the job in that first sentence.

Gradient Generator runs in your browser. The file or the figures stay on your device, and the free plan does not ask you to create an account.

Use it when you have a color, a palette, or a contrast pair and you need the other form of that color.

Open it when you need to build CSS linear and radial gradients visually. If you need a different output, pick the tool whose description names that output.

Enter the hex, the RGB, or the two colors the form asks for. A name like “blue” is not a value.

Run it once with the values you have. The result should line up with this promise: Build CSS linear and radial gradients visually. Change one field if you want a second case, and keep the other fields the same so you can see what moved.

Check the converted value in the place you will use it. A contrast ratio is about those two colors, not about a whole page.

Keep the units, the dates, and the file type that the form showed. A number from the Gradient Generator is ready to copy only after you have checked it against the labels on this page.

Screen settings and surrounding colors change what people see. The number is the math for the values you typed.

Anything the description does not mention is outside this tool. Use the result as the estimate or the file this page promised, then check the source that actually applies to your bank, school, client, or project.

Other tools in Color Tools include HEX to RGB, RGB to HEX, Color Contrast Checker, Color Picker, CSS Gradient Generator and Freelance Contract Generator. Open the one whose description matches the next job.