About CSS Gradient Generator
CSS Gradient Generator builds linear, radial, and conic CSS gradients with a visual editor — drag the colour stops, change the angle on a dial, switch the gradient type with a tab, and copy production-ready CSS. The output is also available as a Tailwind arbitrary-value class or an inline SVG, which is handy for emails and OG images where CSS gradients don't render. A curated set of presets (sunset, aurora, mesh-style blends) gives you a starting point if you're not sure where to begin.
- No uploads
- Browser-only
- Works offline
- 100% free
How it works
- 1
Pick a gradient type
Choose linear, radial, or conic. The preview panel updates immediately so you can compare the visual difference between the three before committing.
- 2
Drag stops, set the angle
Click anywhere on the gradient bar to add a colour stop, drag stops to reposition, and use the colour picker on each one. Adjust the angle with the rotary control or type a value.
- 3
Copy CSS, Tailwind, or SVG
The output panel always shows the current gradient as three formats. Copy the one your stack uses — Tailwind for arbitrary-value classes, SVG when you need pixels in an image.
Related tools
Browse allHEX, RGB, HSL, HSV, CMYK with sliders and WCAG contrast.
Pull dominant colours out of any image. Copy HEX, RGB, HSL — download palette PNG.
Click anywhere on an image to read its HEX, RGB and HSL values.
Build a complete favicon set from a letter or your own image.
Frequently asked questions
Are my files uploaded to a server?
No. Every tool on SnapToolz runs entirely inside your browser using JavaScript and WebAssembly. Your file is read locally, processed in memory, and the result is offered as a download. Nothing is sent to a server — there isn't one to send to.
Does the output use modern CSS like color-mix or oklch?
No — output uses the widely supported background-image: linear-gradient/radial-gradient/conic-gradient syntax with sRGB hex colours. That works in every browser released in the last five years, including older WebViews. If you need OKLCH interpolation specifically, hand-edit the output to swap the colour space — the rest of the syntax stays the same.
Why does the Tailwind output use a bracket value instead of bg-gradient-to-r?
Tailwind's built-in gradient utilities cap you at two or three stops and fixed directions. For anything richer — custom angles, multiple stops, radial or conic — an arbitrary-value class like bg-[linear-gradient(...)] is the clean way to drop in the full CSS without writing a new utility.
Can I use the SVG output as an Open Graph image?
Yes — the SVG is self-contained with no external references, so you can save it as a .svg and reference it from an og:image meta tag, or convert it to PNG with any rasteriser. It also embeds cleanly into emails that strip CSS gradients.
Does it work offline?
Yes. SnapToolz is a Progressive Web App. After your first visit, the app is cached on your device and every tool keeps working without an internet connection.
Is SnapToolz free?
Yes — every tool is 100% free with no sign-up, no watermark, no hidden tier. The whole platform is open source and we have no plan to gate features.