Free Gradient Editor Online

How it works

Drag a color stop, or type a HEX, RGB, or HSL value.
Choose linear or radial, set the angle, then copy the CSS or a stop color.
Paste the gradient in PictorX on fills, text, and shapes, or keep editing the stops.

Color stops you can drag

Each handle is a color stop. Drag it along the bar to change where that color sits, click it to edit HEX, RGB, HSL, HSV, or CMYK, and add or remove stops with the color count. Linear gradients also take an angle so the blend can run in any direction; radial gradients spread from the center.

CSS you can paste anywhere

Copy the full linear-gradient or radial-gradient string for CSS and design tools, or copy a single stop as HEX, RGB, HSL, HSV, or CMYK. Copy palette copies every hex code at once. Then keep editing in PictorX.

Frequently asked questions

What is a gradient editor?

A gradient editor lets you mix two or more colors along a line or from a center point. Each handle is a color stop: drag it to change where that color sits, then copy CSS or HEX for backgrounds, text, and shapes.

How do linear and radial gradients differ?

A linear gradient blends colors in one direction—set the angle so it can run left to right, top to bottom, or on a diagonal. A radial gradient blends from the center outward, like a spotlight.

Can I copy CSS and HEX?

Yes. Copy CSS copies the full linear-gradient or radial-gradient string. Select a stop to copy HEX, RGB, HSL, HSV, or CMYK. Copy palette copies every hex code at once.

Does the gradient editor upload my work?

No. The editor runs in your browser. Copy the CSS or codes, then use them in PictorX on fills, text, and photo effects in the same workspace.