How many color stops can a gradient contain?

You can use between two and ten stops. The minimum keeps the result a meaningful gradient, while the upper limit keeps the visual editor manageable.

Can individual gradient colors be transparent?

Yes. Every selected stop has its own Opacity value. The generated CSS uses a color form that preserves that transparency when necessary.

What is the difference between radial and conic centers?

A radial gradient expands outward from its center, using a circle or ellipse. A conic gradient rotates colors around its center from a chosen start angle.

Does Reverse colors alter stop spacing?

It mirrors the colors and their positions across the gradient, preserving the relative spacing pattern while reversing its direction.

Back to Design & Color Tools

Gradient Generator

Compose multi-stop CSS gradients visually while retaining exact control over geometry, position, opacity and color.

Select a stop below, then click the Color field on the right to change its color. Click the gradient bar to add another stop, or drag a stop to reposition it.

How to use Gradient Generator

1
Choose Linear, Radial or Conic under Gradient type.
2
Click the gradient track to add color stops, drag a stop to reposition it and select a stop to edit its HEX, position or opacity.
3
Set a linear angle, radial shape and center, or conic start angle and center using the relevant controls.
4
Use Reverse colors when needed and inspect the live preview as the stops and geometry change.
5
Copy the generated CSS declaration, or Reset the workspace to its initial gradient.

Frequently asked questions

About Gradient Generator

Gradient Generator treats a gradient as editable geometry rather than a pair of color fields. Stops live on a real track, can be inserted at any point, moved with pointer or keyboard input and assigned independent opacity values. The preview and CSS are produced from the same ordered data.

Each gradient family exposes only the controls that define it. Linear mode uses direction, radial mode combines shape with a movable center, and conic mode joins a start angle to that center. Up to ten stops support subtle transitions, bands and complex color progressions without hand-editing a long declaration.

The output is standard CSS intended for modern browsers. Copying the declaration transfers the current colors, positions and geometry exactly as displayed; no image is rendered or uploaded.