ghosh/uiGradients

🔴 Beautiful colour gradients for design and code

Vue

6,028

1,119 commits

updated Mar 16, 2026

See the code

README

Made with love License Contributors Build Status

uiGradients is a community contributed collection of beautiful multi-color gradients


 

About

This is an effort to give back to the community, by the community. Hopefully this will help you draw inspiration and serve as a resource for picking gradients for your own projects.

 

Contributing

Adding a gradient to the library is super simple. All the gradients are loaded and rendered from a single gradients.json file in the root.

To add your gradient, fork this repository, add your gradient colors in the HEX format along with a name to the end of the json file and submit a pull request. Don't forget the commas!

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

NOTE - Please keep gradient submissions and bug fixes in separate PRs.

 

Improvements and Bugs

Please feel free to open a new issue here with your suggestions or any bugs which you may have come across.

 

Data

While there is no official api, all the gradients are present in the gradients.json file. The code below is an example of fetching the data via a CURL request

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

 

Built with uiGradients

A few open source projects built with uiGradients

 

License

MIT

 

✌️

A little project by @i_ghosh

css
design
gradients
javascript
vue

ghosh/uiGradients

🔴 Beautiful colour gradients for design and code

Vue

6,028

1,119 commits

updated Mar 16, 2026

See the code

README

Made with love License Contributors Build Status

uiGradients is a community contributed collection of beautiful multi-color gradients


 

About

This is an effort to give back to the community, by the community. Hopefully this will help you draw inspiration and serve as a resource for picking gradients for your own projects.

 

Contributing

Adding a gradient to the library is super simple. All the gradients are loaded and rendered from a single gradients.json file in the root.

To add your gradient, fork this repository, add your gradient colors in the HEX format along with a name to the end of the json file and submit a pull request. Don't forget the commas!

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

NOTE - Please keep gradient submissions and bug fixes in separate PRs.

 

Improvements and Bugs

Please feel free to open a new issue here with your suggestions or any bugs which you may have come across.

 

Data

While there is no official api, all the gradients are present in the gradients.json file. The code below is an example of fetching the data via a CURL request

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

 

Built with uiGradients

A few open source projects built with uiGradients

 

License

MIT

 

✌️

A little project by @i_ghosh

css
design
gradients
javascript
vue

Project health

Overall

2.8/10

Maintained

0/10

Code review

5/10
OpenSSF Scorecard

Significant stargazers

Andreas Madsen

687 followers · starred Sep 2014

you06

109 followers · starred Jun 2018

Jessica Lord

16,592 followers · starred Sep 2014

Jakub Bednář

42 followers · starred Sep 2014