Runs in your browser. Files are never uploaded — you can go offline after the page loads.
How to use the CSS Gradient Generator
Pick linear or radial and set the angle.
Add colour stops and drag their positions.
Copy the CSS or download a PNG.
Easy to use
Drop files, pick options, download. Whole folders at once, no signup, no daily limit.
Best quality
The same engines the professionals use — SVGO, resvg, MozJPEG, libwebp, libavif — compiled to run in your browser.
Private & secure
Files are processed on your device and never uploaded. Close the tab and nothing remains anywhere.
Gradients, ready to paste
Build a linear or radial gradient with as many colour stops as you like, set the angle, and drag each stop's
position — the preview updates live. Start from a curated preset or from your own colours. The output is a
ready-to-paste CSS background rule.
Copy the CSS straight into your stylesheet, or download a 1600×900 PNG for a slide, an email or an image editor that
can't use CSS. Everything is generated in your browser. For soft organic shapes instead of rectangular fills, see the
Blob Generator.
Frequently asked questions
Can I use the output in CSS directly?
Yes — copy gives you a complete background: linear-gradient(...) or radial-gradient(...) rule to paste straight into your stylesheet.
When would I download the PNG?
For tools that can’t use CSS — a slide deck, an email, or an image editor — the PNG gives you the same gradient as a 1600×900 picture.
Need an organic shape instead?
The Blob Generator makes soft SVG blobs; this tool is for rectangular gradient fills.
Most online converters upload your file to a server. InfyTool ships the actual encoders to your browser as WebAssembly instead, so processing happens inside your tab — faster for batches, and nothing to delete afterwards.
No upload, ever. Turn off Wi-Fi after the page loads and every tool keeps working.
No limits. No file-size cap, no queue, no watermark, no account.
Runs on your CPU. Batches use several cores in parallel; nothing is throttled.