Gradient Generator
Design linear, radial and conic gradients with any number of stops — copy the CSS or export a PNG.
How to Use Gradient Generator in 3 Steps
Pick a type and stops
Linear, radial or conic. Each stop has a colour and a position; add as many as you like, remove any beyond two, and drag the angle slider for linear and conic.
Watch the preview
The preview and the code update live. Switch the output to Tailwind or SVG in Settings, or choose rgb()/hsl() colours.
Copy or export
Copy the code, download it as a .css file, or export the gradient as a PNG in 1920×1080, 1200×630 (social) or 1080×1080.
Gradient Generator — Frequently Asked Questions
Which browsers support these gradients?
Linear and radial gradients work everywhere. Conic gradients work in all current browsers (Chrome 69+, Firefox 83+, Safari 12.1+). No vendor prefixes are needed today, so none are added.
What does “Include fallback” do?
It adds a plain background-color line with the first stop’s colour before the gradient, so very old browsers or email clients that ignore gradients still show something sensible.
How does the PNG export render?
The same stops are painted on a canvas with the browser’s own gradient engine at the chosen size, so the PNG matches the preview. Angles and positions are honoured; the image is opaque unless a stop is transparent.
Can I use hsl() or named colours?
Yes — type any CSS colour into a stop’s text field (names, rgb(), hsl(), oklch()…). The picker beside it syncs to the parsed value.
Is my input sent anywhere?
No. Everything is computed by JavaScript in your browser tab. Nothing is uploaded, logged or stored by Toolity.