Art tools
Gradient generator
Build a CSS gradient, copy the code, or export a flat PNG to paint over. Everything runs in your browser.
How it works
Build a gradient visually and get the code for it. Add as many color stops as you like, drag them along the bar to set each position, and switch between a linear gradient (with an adjustable angle) and a radial one. A live preview fills the panel as you work, and the matching CSS background is generated for you to copy.
When you want to paint over the result rather than use it on the web, export it as a flat PNG at a size you choose - handy as a base layer in any drawing app. Everything runs in your browser: the CSS is built from your stops and the PNG is rendered on a canvas, so nothing is uploaded.
Example. Set the first stop to #0689DC at 0% and a second to #131A2B at 100%, choose a 135 degree linear gradient, and copy "linear-gradient(135deg, #0689DC 0%, #131A2B 100%)" - or export a 1920x1080 PNG of the same blend to paint on.
FAQ
What kinds of gradient can I make?
Linear gradients with any angle and radial gradients, each with two or more color stops. You set the color and position of every stop, and the preview and CSS update live.
How do I use the CSS it generates?
Copy the generated value into a CSS background or background-image property, for example "background: linear-gradient(135deg, #0689DC, #131A2B);". It is standard CSS that works in every modern browser.
Can I export the gradient as an image?
Yes. The gradient is drawn to a canvas and saved as a PNG at the dimensions you choose, so you can drop it into an art program as a flat background layer to paint over.
Does this send my design anywhere?
No. The CSS is assembled and the PNG is rendered entirely in your browser. Nothing about your gradient is uploaded or stored on a server.