CSS Gradient Generator

Because browsers interpolate through sRGB, so two vivid colours on opposite sides of the wheel pass through a desaturated grey in between. The fix is adding an intermediate colour stop to steer the path, or choosing colours nearer each other on the wheel rather than true opposites.

Linear for backgrounds, buttons and anything where you want a directional sweep — it is the workhorse. Radial for spotlight effects, soft glows behind a focal point, and subtle vignettes. Radial draws the eye to its centre, so use it where you actually want attention.

CSS gradients are drawn by the browser rather than downloaded, so they are far lighter than a background image and scale perfectly at any size. Animating one is the exception — that forces repainting, and animating a static gradient’s opacity is usually smoother than animating its colour stops.

Yes, CSS Gradient Generator is completely free. No signup, no account, and no watermark on outputs. A Pro tier is available for 100 AI ops/day and larger file sizes.

CSS Gradient Generator runs entirely in your browser. Your file is never uploaded — it is read, processed and saved locally, so it never reaches our servers or anyone else's. You can disconnect from the internet after the page loads and it still works.