CSS Gradient Generator
Build a CSS linear-gradient with any number of color stops and a custom angle. See a live preview and copy the CSS, free and private, right in your browser.
Drag color stops on a live preview to build a linear-gradient background, then copy the exact CSS, handy for buttons, hero sections, and overlays without doing the angle and stop-position math by hand.
How to use it
- Add and arrange your color stops
- Set the angle and preview the gradient live
- Copy the generated CSS into your stylesheet
Frequently asked questions
- Can I use more than two colors?
- Yes, add as many stops as you want and drag each one to reposition it along the gradient line. The generated CSS updates with the right percentage for each stop.
- Does it support radial gradients too?
- This tool focuses on linear-gradient output with adjustable angle; if you need a radial or conic gradient you'll want to tweak the CSS manually after copying it out.
- Will the CSS work in every browser?
- The linear-gradient() syntax it generates is standard modern CSS supported in all current browsers, no vendor prefixes needed.
- 1
Nothing is uploaded
The file never leaves your device. There is no server to send it to, so there is nothing to leak, log, or subpoena.
- 2
No signup, no limits
No account, no email, no daily cap, no watermark, and no paid tier waiting behind the third file.
- 3
Works offline
Load the page once and it keeps working with the network off, because all the work was always happening locally.