About this gradient generator
A small, dependency-free builder for one job: turning a type, a set of colour stops and an angle or position into the exact CSS you would otherwise write by hand. No account, no upload, and nothing you build here is ever recorded.
Why it exists
The three gradient functions share enough syntax to be confusing and differ in exactly the places that cause bugs: radial-gradient() and conic-gradient() both take a position after at, but only conic-gradient() needs the word from before its angle; stop order in the source does not have to match stop order on screen, which makes hand-written gradients with unsorted stops render correctly but read confusingly. A visual builder removes the syntax from the decision entirely — you place colours, the tool writes correct CSS.
How the output is built
Every gradient is described internally as a plain model — a type, an angle, a shape, a position, and a list of colour stops — and one function turns that model into CSS text. A few rules apply uniformly, regardless of which type is selected:
- Stops are always sorted by position before they are written out. You can add a stop out of order in the list and the generated CSS still renders identically to typing them in order by hand, because
linear-gradient()and friends do not require source order to match visual order — but sorting on output keeps the printed CSS easy to read. - Fewer than two stops is padded, never rejected. A single stop is duplicated to both 0% and 100% so the output stays valid CSS (a flat fill, technically still a gradient) instead of producing a broken declaration.
- Hex colours are normalised. Shorthand (
#f00) expands to full form, case is lowered, and a missing#is added, so pasted values from anywhere behave the same way. - Angles wrap rather than clamp. 370deg becomes 10deg instead of being capped at 360, because it is a meaningful angle, not an overflow.
How it was verified
The model-to-CSS function is pure — no DOM, no globals — and was run under Node against a fixed set of cases before this page shipped:
| Case | Result |
|---|---|
| Two-stop linear at 90deg produces the exact expected string | pass |
| Stops given out of order are sorted by position in the output | pass |
| Radial output has correct shape/position/stop syntax | pass |
Conic output has correct from/at/stop syntax | pass |
| A single colour stop is padded to two rather than left broken | pass |
| Hex normalisation: shorthand, case and missing "#" | pass |
| Angle wraps modulo 360 instead of clamping | pass |
| Every bundled preset builds without throwing | pass |
How the site is built
- Static HTML, one small stylesheet, two small scripts. No framework, no build step, no bundler.
- Nothing here needs the network. No CDN framework, no web font, no remote image; the favicon and header glyph are inline SVG. Once loaded, the page works offline.
- System font stack — your operating system's own UI font, so nothing downloads and nothing shifts as the page loads.
- What you build never leaves your device. The whole thing runs in your browser; nothing you type or pick is uploaded anywhere.
- Dark mode follows your system setting via
prefers-color-scheme.
Scope and honesty about limits
This builds the three standard CSS gradient functions and nothing beyond them — no repeating gradients, no multiple layered gradients in one declaration, no image-based mesh gradients. Those are all valid CSS but are a different, more advanced editing surface than a "pick colours and an angle" tool serves well. The output is plain CSS text; this tool does not check that a given colour pair is readable as text — use the contrast checker for that — and it makes no claim about how a gradient will look on a specific display's colour gamut or brightness.