Gradient Code Generator
Design linear, radial or conic gradients with a draggable dial and a colour-stop editor, preview them over a transparency checkerboard, and export CSS, Tailwind, SCSS, SVG, SwiftUI and Compose code.
A hint halfway between two stops makes the interpolation reach the next colour sooner — Chrome, Firefox and Safari support the double-position syntax used here.
Preview
linear-gradient(135deg, #4F46E5 0%, 30%, #8B5CF6 50%, rgb(245 158 11 / 0.85) 100%)
background: linear-gradient(135deg, #4F46E5 0%, 30%, #8B5CF6 50%, rgb(245 158 11 / 0.85) 100%);
Stop table
| # | Colour | RGBA | Position | Hint |
|---|---|---|---|---|
| 1 | #4F46E5 | #4F46E5 | 0% | — |
| 2 | #8B5CF6 | #8B5CF6 | 50% | 30% |
| 3 | #F59E0B | rgb(245 158 11 / 0.85) | 100% | — |
About this tool
Build linear, radial and conic gradients with a dial that sets the angle and a stop editor that handles colour, opacity, position and interpolation hints. The preview sits on a checkerboard so transparency is obvious, and the generator emits CSS, Tailwind arbitrary values, SCSS, SVG, SwiftUI and Jetpack Compose. Everything is computed in your browser — no network, no uploads.
- 100% free — no account needed
- Runs in your browser
- Nothing is uploaded
Frequently asked questions
Is Gradient Code Generator really free?
Yes. Gradient Code Generator is completely free on PureBrowser — every feature, with no account, no trial, and no credit card.
Does Gradient Code Generator upload my data?
No. Gradient Code Generator runs entirely inside your browser, so anything you type, paste, or open stays on your own device.
Do I need to sign up or install anything?
Neither. There is no account and nothing to download — open the page and Gradient Code Generator is ready to use on desktop or mobile.
Does Gradient Code Generator work offline?
Once the page has loaded, yes. All of the processing happens locally in your browser, so it keeps working without a connection.
More developer tools
Folder Structure Generator
Build folder structure diagrams, ASCII directory trees, and file tree visualizations for READMEs and docs.
.gitignore Generator
Generate merged .gitignore rules for your stack with one click.
JSON to TypeScript Interface
Convert JSON into TypeScript interfaces with inferred nested types.
Text to Slug Converter
Convert titles and phrases into clean SEO-friendly URL slugs.
UTM Builder
Build campaign URLs with UTM parameters for analytics tracking.
JSON Formatter & Validator
Validate, format, and minify JSON directly in your browser.