Free Online Gradient Generator

1. Pick a gradient type: Linear, Radial or Conic.
2. For linear and conic, set the angle with the slider.
3. Click each stop's color swatch to edit it; drag the position slider to move it along the gradient.
4. Use Add stop to add more colors (up to six) or the X next to a stop to remove it.
5. Click Copy CSS to copy the full background declaration.

CSS Images Module Level 3 defines three gradient functions. `linear-gradient` walks color along an axis specified by angle or direction keyword; `radial-gradient` spreads outward from a center point with an optional shape and size; `conic-gradient` sweeps color angularly around a center, ideal for pie segments and color wheels. Every gradient is built from color stops — color paired with a percentage or length — and the browser interpolates between them in the gradient color-interpolation method (defaults to sRGB but can be set to oklab for smoother blends).

This generator targets developers building a hero section, marketing designers prototyping a brand background, and educators showing how multi-stop gradients differ from two-color ones. Live preview sits next to controls for type, angle, and up to six stops.

Output is a single `background:` declaration — drop it into a stylesheet without touching images or SVG.