Gradient Generator

Linear, radial, and conic gradients are supported.

Yes, one-click copy the generated CSS gradient code to apply directly to your website.

When two colors sit opposite each other on the wheel, the blend passes through a point where saturation falls close to zero, and that shows up as a dull gray band. Blue-to-orange and red-to-green pairings are the usual culprits. Adding a third color as a mid stop routes the blend around the gray, and choosing two hues that sit near each other on the wheel avoids the problem entirely.

Yes, you can download a PNG and drop it straight into a slide background, a social image or a print layout. For a web page, though, the CSS is the better choice: there is no file to download, the gradient stretches to any screen size without breaking, and it never shows the stair-stepping that a scaled-up bitmap does.