# ghosh/uigradients

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/ghosh-uigradients).**

5,999 stars · 1,398 forks · Vue · MIT

## Links

- GitHub: https://github.com/ghosh/uiGradients
- Homepage: http://uigradients.com/
- awesome-repositories: https://awesome-repositories.com/repository/ghosh-uigradients.md

## Topics

`css` `design` `gradients` `javascript` `vue`

## Description

uiGradients is a community-maintained, open-source repository of named multi-color gradients with CSS code snippets, distributed under the MIT license. It provides a web interface for browsing, previewing, and copying color gradients from a crowdsourced collection stored as a static JSON file.

The project distinguishes itself through a file-based contribution workflow where new gradients are added by editing a single JSON file and submitting a pull request, relying on Git for version control. Gradients are accessed via named preset lookup, and their CSS code can be copied directly to the clipboard using the browser's Clipboard API.

The collection includes a curated library of gradient presets that can be browsed visually and applied to web design projects by referencing the gradient name and its color stops from the JSON data store. The MIT license permits free use, modification, and distribution of the gradient collection with only copyright notice retention.

## Tags

### User Interface & Experience

- [Gradient Preset Collections](https://awesome-repositories.com/f/user-interface-experience/gradient-preset-collections.md) — Provides a crowdsourced repository of named gradients that accepts new contributions via pull requests to a JSON file.
- [CSS Snippet Collections](https://awesome-repositories.com/f/user-interface-experience/css-snippet-collections.md) — Provides an open-source library of named multi-color gradients with CSS code snippets for web design projects.
- [Gradient Abstractions](https://awesome-repositories.com/f/user-interface-experience/gradient-abstractions.md) — Applies curated multi-color gradients to elements by referencing their names and color stops from a JSON collection. ([source](https://github.com/ghosh/uiGradients/blob/master/LICENSE.md))

### Graphics & Multimedia

- [Color Space Gradients](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/colors/gradient-generators/color-space-gradients.md) — Provides a curated collection of multi-color gradients for visual browsing and selection. ([source](http://uigradients.com/))
- [Gradient Preset Libraries](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/colors/gradient-generators/color-space-gradients/gradient-preset-libraries.md) — Provides a browsable library of community-sourced named gradient presets for visual selection. ([source](https://cdn.jsdelivr.net/gh/ghosh/uigradients@main/README.md))
- [Preset Browsers](https://awesome-repositories.com/f/graphics-multimedia/preset-browsers.md) — Provides a web interface for browsing, previewing, and copying color gradients from a community-maintained collection.
- [Gradient CSS Copiers](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/colors/gradient-renderers/css-gradient-graphics/gradient-css-copiers.md) — Copies the CSS code for a selected gradient to the clipboard with a key press. ([source](http://uigradients.com/))
- [Gradient Contribution Interfaces](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/colors/gradient-renderers/gradient-samplers/gradient-contribution-interfaces.md) — Allows adding new gradients to the collection by editing a JSON file and submitting a pull request. ([source](http://uigradients.com/))

### Software Engineering & Architecture

- [Contribution Workflows](https://awesome-repositories.com/f/software-engineering-architecture/contribution-workflows.md) — Accepts new gradients via pull requests that edit a single JSON file, relying on Git for version control.