Gradient Generator
Generate linear or radial gradient
Settings
Preview
background: linear-gradient(90deg, #fa8072 0%, #c8fff1 100%);
About this tool
This generator writes the CSS background property for a linear gradient (linear-gradient) or a radial one (radial-gradient). Use it to put together the background of a banner, a button or a page section without opening a design app. The preview updates with every change, and the code shown right below it matches exactly what you see.
Each color is a gradient stop placed between 0 and 100%. You can add as many as you need and remove them as long as at least two remain. In linear mode the angle goes from 0 to 360 degrees; in radial mode the gradient is a circle whose horizontal center position you control. Your settings are remembered in the browser.
How to use it
- Pick the gradient type: Linear or Radial.
- Set the Angle (°) for a linear gradient, or the Center position (%) for a radial one.
- Choose each color and its Position (%), and click Add Color for an extra stop.
- Check the result in the Preview, then click Copy CSS.
Frequently asked questions
What CSS does the tool output?
A single background declaration containing linear-gradient(angle, colors) or radial-gradient(circle at x%, colors). Each color is written in hex and followed by its position as a percentage. Paste the line into the CSS rule of the element you want to style.
How many colors can a gradient have?
At least two, with no fixed upper limit. The Add Color button creates a white stop at 100%, which you can then edit. You can only remove a color while more than two remain in the gradient.
Can I use semi-transparent colors?
Not directly: colors come from the browser color picker as six-digit hex values, so they are opaque. For a transparency effect, replace one of the colors in the copied code with an rgba() value or the transparent keyword.
Are my settings sent to a server?
No. The gradient and its code are computed in your browser with no network request. Colors, positions and angles are only saved in the browser's local storage so you find them again on your next visit.