# uiGradients: a color collection that ships as JSON

> uiGradients is a community-contributed collection of multi-color gradients, presented as a browsable website at uigradients.com and, more importantly for developers, as a single gradients.json data file that anyone can fetch and build on. The repository was last pushed on 2026-03-16 and has never issued a tagged release.

**ghosh/uiGradients** — 🔴 Beautiful colour gradients for design and code

- Repository: https://github.com/ghosh/uiGradients
- Website: http://uigradients.com/
- Stars: 6,023 · Forks: 1,400
- Language: Vue
- License: MIT
- Published: 2026-09-22 · Updated: 2026-09-22 · Language: en
- Canonical page: https://hysenlabs.com/projects/ghosh-uigradients

## A website that is really a JSON file

uiGradients describes itself as a community contributed collection of beautiful multi-color gradients, and the operative phrase is community contributed: the website at uigradients.com is a viewer, while the substance lives in a single gradients.json file at the repository root from which all gradients are loaded and rendered. Each entry is small and legible, a name and an array of HEX colors, and the arrays are not limited to two stops, the README's own example, Career, lists three colors, #cb202d, #dc1e28 and #3366cc. The framing is modest and community-minded, an effort to give back by the community, serving as inspiration and as a resource for picking gradients. For a developer, the useful reading is that the collection is data first and presentation second, which is exactly why it has proven so portable.

## Contributing: append, comma, separate pull request

The contribution flow is deliberately trivial, and the README's tone makes the stakes clear. Fork the repository, add your gradient colors in HEX format along with a name to the end of the JSON file, and submit a pull request, remembering the commas:

```json
[
    {
        …
    },
    {
      "name": "Career",
      "colors": ["#cb202d", "#dc1e28", "#3366cc"]
    }
]
```

Two house rules follow. Gradient submissions and bug fixes must arrive in separate pull requests, which keeps the data history clean and reviewable, and the JSON must stay valid, which the project enforces in its test run rather than trusting contributors. The whole onboarding for a new contributor is one paragraph, and that simplicity is the mechanism by which the collection grew.

## No official API, and none needed

There is no official API, and the README's workaround is the honest one: all the gradients are present in gradients.json, fetchable straight from the repository's raw content URL:

```bash
curl -i https://raw.githubusercontent.com/ghosh/uiGradients/master/gradients.json
```

That single command is the integration story. Any application, build script or runtime can pull the entire dataset with one HTTP request and cache it forever, since a curated list of gradients changes slowly. One historical wrinkle is visible in the command itself: the documented URL addresses the master branch, while the repository's default branch is now main, a fossil of a branch renaming that the README never caught up with. Anyone automating against the file should verify which branch serves their request before hardcoding the path.

## A port ecosystem the JSON made possible

The built-with list reads as a tour of platforms, and every entry consumes the same data file. UIColor-uiGradientsAdditions brings the gradients to iOS, and NilColorKit repackages them for Swift. A styled-components package serves React users, uigradients-scss ports the collection to SCSS variables, and helper-uigradient is a Handlebars helper for template authors. There is an open source iOS viewer app, Potion uses the data inside React components for declarative visualizations, and Randient and RandomGradient build randomized gradient pickers on top, one via a JSON API of its own. Nine downstream projects across four ecosystems is the return on the decision to make the data a plain JSON file rather than a database behind a site.

## A Vue 2 site that lints its own data

The website itself is a Vue 2 application, depending on vue ^2.5.9, built with the webpack-and-Babel-6 toolchain of its era and tested with Karma for unit tests plus a Node-driven end-to-end runner. The most interesting line in package.json is the smallest: the test script chains unit, e2e and lintjson, and lintjson runs eslint on gradients.json itself. The data file is linted in CI like source code, which is how a JSON file edited by hundreds of strangers over years stays parseable, and why the README's plea to not forget the commas is backed by machinery. Clipboard and canvas-to-blob appear among the dependencies, the fingerprints of the site's copy-a-gradient and export features that make the gallery practical rather than merely pretty.

## bun.lock and wrangler.json on a Travis-era tree

The repository's root is a stratigraphy of JavaScript tooling eras. The old layer is dense: .babelrc, .postcssrc.js, an eslintrc with the Airbnb base config, and a .travis.yml pointing at a CI service that has long since receded from default use. The new layer is sparse but telling: a bun.lock, meaning the modern Bun runtime now participates in the development workflow, and a wrangler.json, the Cloudflare deployment configuration, alongside a bustcache script invoking cfcli purge to clear the CDN cache after deploys. A project can migrate its runtime and hosting while keeping its Vue 2 application code intact, and this tree is the evidence. Nothing about the gradient data changed across those eras, which is the quiet argument for keeping data decoupled from presentation.

## Quiet since March 2026, and why that is survivable

Maintenance facts deserve plain statement: the last push to the repository was on 2026-03-16, more than six months before today, and the project has never issued a GitHub release, deploying instead to its pages hosting through a gh-pages-deploy script. The license is MIT, the author is Indrashish Ghosh, and the contributor graph is community-sustained. None of this quiet is fatal, because the artifact is a stable dataset rather than living software, a list of color arrays needs no security patches and rarely needs features, and the worst realistic failure is a stalled review queue on new gradient submissions. Other gradient galleries exist as websites; the durable asset here is the open, machine-readable file, and that continues serving regardless of commit frequency.

## Conclusion

Use uiGradients when you want a curated set of named gradients you can browse for inspiration or consume programmatically from gradients.json, with an MIT license that permits any use. Look elsewhere for a gradient editor or generator, since this is a fixed collection, not a tool for composing new blends interactively. Verify first that the palette still suits your design system, note that the repository has been quiet since 2026-03-16, and pin the JSON at a commit if reproducible builds matter to you.

## FAQ

### How do you use uiGradients?

Browse the collection at uigradients.com, or fetch gradients.json directly, for example with curl -i https://raw.githubusercontent.com/ghosh/uiGradients/master/gradients.json, and use the HEX color arrays in your CSS or code. There is no official API; the JSON file is the interface.

### How do you add a gradient to uiGradients?

Fork the repository, append an object with a name and an array of HEX colors to the end of gradients.json, and open a pull request. Gradient submissions and bug fixes should be kept in separate pull requests.

### Is uiGradients free to use?

Yes. The project is MIT licensed, covering both the website and the gradients.json data, and it is a community-contributed collection created by Indrashish Ghosh.

## Sources

- [ghosh/uiGradients on GitHub](https://github.com/ghosh/uiGradients)
- [Issues](https://github.com/ghosh/uiGradients/issues)
- [License: MIT](https://github.com/ghosh/uiGradients/blob/main/LICENSE)
- [Project website](http://uigradients.com/)
- [README](https://github.com/ghosh/uiGradients/blob/main/README.md)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/ghosh-uigradients