🔴 Beautiful colour gradients for design and code

Related tags

Color Picker javascript css design vue gradients
Overview

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

Comments
  • Smarter JSON spec

    Smarter JSON spec

    First of all, thanks for this great repo.

    In my opinion the JSON format should be changed. I propose the following:

    [
  {
    "name":   "Emerald Water",
    "colors": ["#348F50", "#56B4D3"]
  }
]

    This uses the American spelling for the word "color", which is used by CSS. For the colors themselves, an array should be used instead of enumerated keys ("colourN"). This also allows for more than two colors per gradient.

    I'd happily submit a PR for master and site. Let me hear, what you think.

    enhancement question 
    opened by buschtoens 11
  • Gradient Angle - Up and Down Arrow Keys

    Gradient Angle - Up and Down Arrow Keys

    The up and down arrow keys could be utilized to modify the angle of which the gradient is angled at. (up arrow increases the deg value, while down naturally does the opposite).

    enhancement 
    opened by pqt 9
  • Copy to clipboard not working on Firefox

    Copy to clipboard not working on Firefox

    I tried to use the option to copy to clipboard on Firefox and it didn't work, then tried again on Chrome and it worked. It may be my browser or an issue with the Firefox.

    opened by rfoel 7
  • How to build & run this website locally

    How to build & run this website locally

    Sir. uiGradients is a really great project. I like it very much. And the website uigradients.com (using Vue) is very cool. How can I build & run it on my Mac locally or Linux server? Thank you!

    opened by seuplus 5
  • Is there a way to install UI Gradients as a gem

    Is there a way to install UI Gradients as a gem

    I am planning to use it on a project, I would want to know if there's a way to install this awesome gradient library inside a SASS project as a gem

    This is just a question :)

    opened by SedueRey 4
  • Use colors array instead of colour1 and colour2

    Use colors array instead of colour1 and colour2

    Uses colors array instead of colour1 and colour2.

    For those interested, I did a regular expression search & replace using: "colour1":\s?(.+,)\s+"colour2":\s?(.+) -> "colors": [$1 $2]

    I also put a space between the name key and its value: "name":" -> "name": "

    Implements #16.

    opened by ArtskydJ 4
  • Using gradients.json to populate data in my app

    Using gradients.json to populate data in my app

    I was wondering if using the json with gradients to populate the database for my app is ok. I wrote a little script in js that rips all gradients with two colors and writes them to my database. I put a notice on the page that most of the gradients were taken from uiGradients and also provided a link to the website, however i wanted to know if that is ok as i plan to use the script i wrote in admin panel for the app so i could at a later point fetch new gradients as they are added as well. If the creator of this repo doesn't give his permission for me to do this i will remove the feature from the app. Note: gradient fetching is controlled, im not constantly scavenging the data on every pageload. Other note: Sorry for my poor english! :D

    opened by petrovicstefanrs 3
  • API for getting an random gradient from uiGradients?

    API for getting an random gradient from uiGradients?

    This would help if you were lazy to get an background/ want your users to have different backgrounds every time. Perhaps set up an API where developers can send XMLHttpRequests to receive an random CSS gradient in JSON form?

    opened by mount2010 3
  • Add gradient, remove unused method in Gradients.js + minor linting

    Add gradient, remove unused method in Gradients.js + minor linting

    • Added 3 new gradients to gradients.json
    • getGradients() in Gradients.js was not used anymore, so removed
    • Minor refactor
    • Minor linting, adding missing semi colons, spaces between braces, removed unnecessary white space
    opened by i-break-codes 3
  • Hide

    Hide "on Facebook" & "on twitter" for smaller screen (More Gradients added).

    When It comes to smaller screen, Share buttons were breaking row. prob

    So i've done a commit with solution of that problem that hides texts "on Facebook" & "on twitter" on smaller screen. solved1

    opened by JimishF 3
  • Update url hash with current gradient

    Update url hash with current gradient

    I think it would be great to change the url hash with the current gradient, so you can link a specific gradient.

    example: http://uigradients.com/#Mantle http://uigradients.com/#Titanium ...

    I can help with a merge request if you like this feature :)

    enhancement 
    opened by lefoy 3
  • Bump express from 4.16.3 to 4.17.3

    Bump express from 4.16.3 to 4.17.3

    Bumps express from 4.16.3 to 4.17.3.

    Release notes

    Sourced from express's releases.

    4.17.3

    4.17.2

    4.17.1

    • Revert "Improve error message for null/undefined to res.status"

    4.17.0

    • Add express.raw to parse bodies into Buffer
    • Add express.text to parse bodies into string

    ... (truncated)

    Changelog

    Sourced from express's changelog.

    4.17.3 / 2022-02-16

    4.17.2 / 2021-12-16

    4.17.1 / 2019-05-25

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump qs from 6.2.3 to 6.2.4

    Bump qs from 6.2.3 to 6.2.4

    Bumps qs from 6.2.3 to 6.2.4.

    Changelog

    Sourced from qs's changelog.

    6.2.4

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [Refactor] use cached Array.isArray
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] Clean up license text so it’s properly detected as BSD-3-Clause
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] use safer-buffer instead of Buffer constructor
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 90d9f2b v6.2.4
    • ba24e74 [Fix] parse: ignore __proto__ keys (#428)
    • f047c9d [Dev Deps] backport from main
    • 5f8e28b [actions] backport actions from main
    • 2c38654 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 37e176d [meta] fix README.md (#399)
    • 081a3ab [Tests] use safer-buffer instead of Buffer constructor
    • 943e411 [meta] Clean up license text so it’s properly detected as BSD-3-Clause
    • 0d82916 [Fix] utils.merge: avoid a crash with a null target and an array source
    • c103b90 [Fix] utils.merge`: avoid a crash with a null target and a truthy non-array...
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump css-what from 2.1.0 to 2.1.3

    Bump css-what from 2.1.0 to 2.1.3

    Bumps css-what from 2.1.0 to 2.1.3.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Owner
Indrashish Ghosh
😀 2 parts designer, 1 part developer ❤️ Open source, JS and CSS
Indrashish Ghosh
GitHub http://uigradients.com/
A Toolbar with Buttons to invert Colors, highlight Links, desaturate and increase Font Size

A Toolbar with Buttons to invert Colors, highlight Links, desaturate and increase Font Size

Wolfgang Wohanka 20 Aug 15, 2022
vuedients -Simple app for creating and viewing gradients

vuedients -Simple app for creating and viewing gradients

Yegor Gunko 1 Sep 10, 2021
An easily customizable gauge for VueJS with gradients and animations

vue-svg-gauge An easily customizable gauge for VueJS with gradients and animations Demo You can find a demo here Installation npm i vue-svg-gauge --sa

Viktor 1 Oct 30, 2021
Gradientos makes it easy to choose gradients.

Gradientos is a web app which can help you choose gradients by simply showing your selected gradients on a live demo website with some common UI elements. You can quickly see how the gradient actually looks on a website. Play around and create your own gradient or select one from our collection.

null 35 Nov 20, 2022
🚀🚀🚀vue3,vue3.0,vue,vue3.x,vue.js,vue后台管理,admin,vue-admin,vue-element-admin,ant-design，vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护，同时支持电脑，手机，平板，切换分支查看不同的vue版本，element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)

??????vue3,vue3.0,vue,vue3.x,vue.js,vue后台管理,admin,vue-admin,vue-element-admin,ant-design，vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护，同时支持电脑，手机，平板，切换分支查看不同的vue版本，element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)

good luck 13.4k Jan 1, 2023
1922 簡訊實聯制 - 生成工具 | 本工具可以讓店家/場所自訂簡訊可修改的部分，並且會生成頁面網址、各種海報樣式和兩個 QR Code 版本 (分別是 "頁面 QR Code" 和 "簡訊 QR Code")。

1922 簡訊實聯制 - 生成工具 本工具可以讓店家/場所自訂簡訊可修改的部分，並且會生成頁面網址、各種海報樣式和兩個 QR Code 版本 (分別是 "頁面 QR Code" 和 "簡訊 QR Code")。 工具網址：https://1922sms.reh.tw/ 頁面網址 可直接給無法掃描 Q

張文相 Wenxiang Zhang (旋風之音 GoneTone) 5 Jun 9, 2022
QR code 4 wifi (QR code for wifi) allows you to print QR code to connect to the wifi. Tap it on the fridge, the door or the desk to ease your guests' life

QR code 4 wifi Available at: qrcode4wifi.clemg.fr/ Generate QR codes according to your wifi settings to ease you guests' life. Print the code and stic

Clément Guibout 10 Mar 7, 2022
A beautiful input component based on Eva Design System and Vue.

Eva Input for Vue.js A beautiful input component based on Eva Design System and Vue 3. If you are using Vue 2, please install v1.x instead. Demo Insta

Jay 18 Dec 24, 2022
✨ Beautiful screenshot of your code snippets

✨ Beautiful screenshot of your code snippets

The Value Crew 28 Nov 19, 2022
✨ Beautiful screenshot of your code snippets

RamroCode 1.1.0 ✨ Beautiful screenshot of your code snippets https://ramrocode.netlify.app Demo ?? ?? See how the code snippets look on a real blog po

The Value Crew 28 Nov 19, 2022
Web application for organization of foodsaving groups worldwide - frontend code and central location for feature planning. For server-side code, go to https://github.com/yunity/karrot-backend

A web platform to support foodsaving groups worldwide. ?? ?? ?? karrot (Frontend) (Backend) This is the frontend repository, i.e. the browser-side sof

yunity 361 Dec 27, 2022
Simply Diary is an open source platform for an online diary, its really just a diary. Each diary has its own code, who knows the code also has access to the diary. Completely free and without registration.

✨ About Open-Source. the project is fully open source, both backend and frontend. Free. you can create a diary for free and without registration. Anon

cnry. 19 Oct 14, 2022
Miria Code Editor - This an online code editor made for a new programming language named Miria.

Miria Code Editor - This an online code editor made for a new programming language named Miria.

Miguel Manjarres 13 Dec 30, 2022
Qr-code-component - QR code component Built With Vue.js

Frontend Mentor - QR code component Welcome! ?? Thanks for checking out this fro

Oskar Straszyński 1 Apr 1, 2022
Code für das Nuxt 3 E-Mail Kontaktformular Video das auf YouTube veröffentlicht wurde. In disem Repo findet man den Code der 1:1 aus dem Video kommt.

Nuxt 3 Minimal Starter Look at the nuxt 3 documentation to learn more. Setup Make sure to install the dependencies: # yarn yarn install # npm npm ins

Johannes Schiel 4 Dec 20, 2022
Muse Vue Ant Design Dashboard - Free and OpenSource Ant Design Vue Dashboard

Muse Vue Ant Design Dashboard Muse - Vue Ant Design Dashboard is a beautiful Ant Design Vue admin dashboard with a large number of components, designe

Creative Tim 178 Dec 26, 2022
Tailwind-furniture-design-page - Furniture Design Page using TailwindCSS And Vue

Furniture Design Page using TailwindCSS Recreated from the Furniture Design Page

Farkhod Akhmedov 1 Feb 3, 2022
Atomic-design - Studies carried out through Bootcamp Fullstack Cataline on Atomic Design and componentization in Vue

Atomic Design Estudos realizados através do Bootcamp Fullstack Cataline sobre At

Daniel Antunes 0 Jan 12, 2022
Build on top of nuxt, boostrap vue, and design inspire from Education Courses UI Design

education-courses-ui-design Build on top of nuxt, boostrap vue, and design inspire from Education Courses UI Design Build Setup # install dependencies

silvesterwali 3 Jun 7, 2022
Flagpack contains 260+ easily implementable flag icons to use in your design or code project.

Flagpack contains 260+ flag icons to easily use within your code project. Flagpack is an open source project and available for JavaScript frameworks/libraries Angular, Vue and React.

Yummygum 42 Dec 27, 2022