uiGradients: Beautiful color gradients for designers and developers with the power of Vue.js

uiGradients with Vue.js

uiGradients is a community contributed collection of beautiful multi-color gradients for design and code. A color gradient (sometimes called a color ramp or color progression) specifies a range of position-dependent colors, usually used to fill a region. This project was recently rewritten by Indrashish Ghosh completely using vue-cli to benefit from the power of Vue.js.

You can go through the available gradients one by one, filter them based on the color of your desire, or display them all on a list, each by a different name.

Showing all Gradients


  • Get CSS of selected gradient
  • Filter gradients by color
  • Rotate angles
  • Download as image

If you do not find the one gradient that meets your taste, you can create one and contribute with your own addition by choosing "Add New Gradient", which fairly easy to do. All gradients are read from a gradients.json file which is available in this project's repo. Simply add your gradient details to it and submit a pull request.

Projects Built with uiGradients

A few open source projects built with uiGradients

uiGradients is an open source project, its source code is available on GitHub.