uiGradients: An Open-Source Gradient Collection for Designers & Developers 79

uiGradients is an open-source gradient collection for designers and developers, featuring plenty of ready-made linear and radial gradients. You can preview them online, copy CSS code, or call them in your code via gradients.json. It's quick to use on websites, apps, or graphic design projects.

uiGradients Core Features

• Easy to use: Pick your favorite gradient and click the top-right corner to copy the code or download the image.

• Supports multiple formats: Exports to CSS, SCSS, LESS, Stylus, Swift, Android XML—developers with different backgrounds can use it right away.

• Community-maintained: All gradients live in the gradients.json file in the GitHub repo. Anyone can fork it and add new color schemes; once the PR is merged, it goes live.

• Lots of related projects: There are already iOS extensions, React components, SCSS versions, Handlebars helpers, and similar projects, making it fast to integrate into any workflow.

• Free and open source: Licensed under MIT, so you can use it commercially and modify it freely, as long as you keep the original author's copyright notice.

uiGradients Use Cases

• For backgrounds, buttons, nav bars, cards, and other eye-catching spots on websites or apps;

• To find brand primary or secondary colors and quickly test whether a palette works;

• To fill gradients in slides, posters, social graphics, and other graphic design work;

• As a reference when learning color theory, to see what gradients are trending right now.

How to Use uiGradients (Web Example)

1. Go to the uiGradients official site and click any gradient in the left list; the right side previews it instantly.

2. Choose "Copy CSS" in the top-right corner to get code like this:

background: linear-gradient(to right, #ff416c, #ff4b2b);

3. Paste it into your stylesheet or inline style, save and refresh to see the effect.

uiGradients Tips

• If you want to stumble onto inspiration by chance, add #random to the end of the URL to jump to a random gradient.

• It also works on phones and tablets—the page adapts to screen size, so just pick and copy the code.

• Use it together with other color tools, like Color Hunt or Mesh Gradients, to create more complex color combinations.