Design
Gradient generator
Build linear and radial CSS gradients.
CSS
background: linear-gradient(90deg, #3366cc 0%, #cc33aa 100%);How it works
Three simple steps — all in your browser.
1
Open it in your browser
Gradient generator runs entirely on your device — no upload, no account, and nothing to install.
2
Do the work
Build linear and radial CSS gradients. Everything happens instantly as you go.
3
Save your result
Download or copy the output straight away. Your data never leaves your device.
Why use Gradient generator
Completely private
Gradient generator works locally in your browser — your files and text are never sent to a server.
Free, with no account
No sign-up, no trial, and no usage limits. Open the tool and start straight away.
Works on any device
Runs in any modern browser on desktop, tablet or phone — nothing to download.
Frequent questions
Is Gradient generator free to use?
Yes — every tool here is completely free, with no account, sign-up, or usage limits.
Is anything uploaded to a server?
No. Gradient generator runs entirely in your browser, so your data never leaves your device.
Do I need to install anything?
No. It works in any modern browser on desktop or mobile — there is nothing to download or install.
Does it work offline?
Once the page has loaded, the processing happens locally, so it keeps working even on a flaky connection.
Explore more tools
Colors
Convert colors between HEX, RGB and HSL.
Contrast checker
Check color contrast against WCAG AA/AAA.
Palette generator
Harmonies, tints and shades from a base color.
Color mixer
Blend two colors and get the steps between.
Blob generator
Generate organic SVG blob shapes.
Color theme maker
Build a light/dark theme and export CSS variables.
Palette from image
Extract dominant colors from an image.
Color blindness simulator
Preview colors for different vision types.