What is Gradient Generator?

A visual CSS gradient builder that lets you create linear, radial, and conic gradients with unlimited color stops. Adjust angles, positions, and colors in real time and copy the CSS with one click.

How to use

1. Step 1 — Choose your gradient type (linear, radial, or conic) and set the direction or angle using the angle slider or preset buttons.
2. Step 2 — Add color stops by clicking the gradient bar. Adjust each stop's color and position by dragging or entering exact values.
3. Step 3 — Preview the gradient live, then copy the generated CSS code to your clipboard or download it as a CSS file.

Result

Say you want a sunset hero background. Pick a 135° linear gradient, set orange at 0%, rose at 50%, and purple at 100%, then copy the CSS into your stylesheet.

Related Tools