wtf is uigradients?

ghosh/uigradients — explained in plain English

Analysis updated 2026-06-26

★ 5,992VueAudience · designerComplexity · 1/5LicenseSetup · easy

Mindmap

mindmap
  root((uiGradients))
    What it is
      JSON gradient list
      Named color pairs
      Community maintained
    Data Format
      Gradient name
      HEX color values
      Single JSON file
    Community Builds
      UIColor iOS extension
      React styled-components
      SCSS port
      iOS browsing apps
    Contributing
      Fork the repo
      Append to JSON
      Submit pull request
    Audience
      Designers
      Web developers
      iOS developers

mindmap root((uiGradients)) What it is JSON gradient list Named color pairs Community maintained Data Format Gradient name HEX color values Single JSON file Community Builds UIColor iOS extension React styled-components SCSS port iOS browsing apps Contributing Fork the repo Append to JSON Submit pull request Audience Designers Web developers iOS developers

Why would anyone build with this?

REASON 1

Fetch the raw gradients.json file from GitHub and use the named gradient data in a web or mobile app color picker.

REASON 2

Browse the collection to pick a gradient name and hex values for a UI background, card, or button design.

REASON 3

Add a new named gradient to the community collection by appending two hex color values to the JSON file and opening a pull request.

What's in the stack?

JSONVue

How it stacks up

	ghosh/uigradients	jekip/naive-ui-admin	armour/vue-typescript-admin-template
Stars	5,992	5,856	5,685
Language	Vue	Vue	Vue
Setup difficulty	easy	easy	easy
Complexity	1/5	2/5	3/5
Audience	designer	developer	developer

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · easy Time to first run · 5min

Free to use for any purpose including commercial projects, as long as you keep the copyright notice.

Wtf does this do

uiGradients is a community-maintained collection of named color gradients for use in design work and web development. Every gradient in the project is stored as a single JSON entry containing a name and a list of two or more HEX color values. The entire collection lives in one file, gradients.json, at the root of the repository. There is no build system or runtime component, the file itself is the deliverable. The collection is publicly accessible without authentication. Fetching the raw file from GitHub returns all gradient definitions in a format any programming language can parse in a few lines. The README does not describe a web interface or design tool, the project's value is the data, not an application built on top of it. A number of community projects have built on this dataset. These include a UIColor extension for iOS, a Swift color library, styled-component wrappers for React, an SCSS port, a Handlebars template helper, and standalone iOS apps for browsing and picking gradients from the collection. The README links to each of these. Contributing a new gradient requires no special setup. Fork the repository, append an entry to gradients.json with a chosen name and at least two HEX color values, and submit a pull request. The README asks that gradient submissions and bug fixes be kept in separate pull requests to keep reviews straightforward. The JSON structure is minimal, so the barrier to contributing is low. The project is released under the MIT license. The README is brief, most of the project's value is conveyed by the data file itself.

Yoink these prompts

Prompt 1

I want to use the uiGradients dataset in my React app. How do I fetch the raw gradients.json file from GitHub and display a color picker that previews each gradient?

Prompt 2

I designed a new gradient called Sunset Breeze using three hex colors. How do I add it to the uiGradients collection and submit it as a pull request?

Prompt 3

I'm building an iOS app and want to use the uiGradients data. Which of the community libraries listed in the README gives me UIColor extensions from this dataset?

Frequently asked questions