Gradient Generator
Build beautiful CSS gradients visually -- linear or radial, with up to 8 color stops, angle and position controls and a live preview. Copy ready-to-use CSS in one click.
Color stops
CSS
How it works
Choose Linear or Radial, then set the angle (or the shape and center for radial gradients). Add up to 8 color stops, pick each color with the color picker or type a HEX code, and drag its position between 0% and 100%. The preview updates instantly, and the CSS box always holds ready-to-paste code with a solid fallback color. Use Random colors for inspiration. Everything runs locally in your browser.
Is my data sent to any server?
No. The gradient generator runs entirely in your browser. Nothing you create is uploaded, stored, or included in analytics.
What is the difference between linear and radial gradients?
A linear gradient blends colors along a straight line at the angle you choose -- 90° runs left to right, 180° top to bottom. A radial gradient blends colors outwards from a point, as a circle or an ellipse.
How do color stop positions work?
Each stop sets where its color is fully applied, from 0% (the start) to 100% (the end). Colors blend smoothly between neighbouring stops. Stops are automatically ordered by position in the CSS, and two stops at the same position create a hard edge.
Will the CSS work in all browsers?
Yes. linear-gradient() and radial-gradient() are supported by every modern browser. The generated code also includes a solid background color first, as a fallback for very old browsers.
More creator utilities are in our Creator Tools. See our Privacy Policy and Terms of Use for more detail.