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 :)

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).

Greetings:

As an iOS Developer, I am always looking for new opportunities for cool projects. After using your web app, I decided to implement a gradient view swiper in swift. Additionally, I have published it to the app store for everyone to use. If you find the project neat, it would be great to add it to your list of resources under "built with uiGradients".

https://github.com/thexande/uiGradients-Viewer-iOS

Give the app a download, and check it out! Thanks for the inspiration.

What to do with similar colours? Although different in color codes, gradients "Dawn" and "Horizon" are optically similar and look like duplicates.

It would be nice if I could toggle on the main site between linear and radial. Also, flip the values and change linear directions.

Would be cool if I could copy the CSS into the clipboard.

Hi.

I've made iOS library for uiGradients but noticed that its license is not described.
I'd appreciate if you specify the license.

Thank you.

Recently added gradient "Chitty Chitty Bang Bang" doesn't seem to work properly. Thumbnail is wrong and only a white blank page is rendered across several browsers.

Safari

Chrome

Firefox

I do not know if this is the right place to issue this. But I want to share my bash script that creates png files based on your gradients (https://github.com/bglnelissen/gradientsMagick). Personally I use these files for my iPhone and Desktop background images.

[
{
…
},
{
"name": "Drawing",
"colors": ["#fce80a", "#ffc000"]
}
]

background-image: -webkit-linear-gradient(to right, #fff, #000);

This is not valid CSS, webkit doesn't know what to right means. It should be left in that case.

You can learn more here.

I was using https://uigradients.com/#Margo to generate gradient CSS code.

When I click copy, I get the following CSS.

background: #FFEFBA;  /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #FFFFFF, #FFEFBA);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #FFFFFF, #FFEFBA); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

The gradient order is reversed.

I've got some ideas for (small) features:

1 - More available angles to rotate gradients;
- Basically, a dropdown with additional diagonal angles (15 and/or 45 degrees) options

2 - Color amount filter:
- Buttons to select only gradients with the specified amount of colors (2, 3, 4, 5...)

3 - The # remove button.
- In some cases we don't need the # on the Hexa value. And could be an option remove that character from there.

I could implement these improvements, if would be approved
😃

First off thanks a million for your awesome tool.
I'd like to suggest a feature. It would be more awesome to add support for all-in-one export of gradients either in a downloadable zip containing all .jpg s or in Photoshop .grd format.

Peace

If you want, I'll submit a PR which would enable automatic linting for every color PR and would point out errors or inconsistencies (if any).

I am kind of a newbie when it comes to CSS Gradients, is it possible to rotate the gradients so that they go top to bottom instead of left to right?

[
{
…
},
{
"name": "Neeraj",
"colors": ["#8b0042", "#d8058e", "#0142c1"]
}
]

The buttons that I assume are meant to change the orientation of the gradient don't have any effect.

A work in progress?

Tested in Google Chrome Version 37.0.2062.94 on the Mac.

When an uploaded gradient has a light/white Colour 2, the .infobox text can't be read, and so are the text in the footer. Had to use ⌘+A to highlight all the text on the page to see the values.

Would you consider adding text-shadow property?

It looks as though the gradients — especially the grey to grey ones — have slightly colored bands as if there were dithering applied only horizontally. However, these bands are blurred across several pixels as if the gradient were rendered at a low resolution and then upscaled with a filter.

Either way, here's a screenshot of the issue (note that the bands can only be seen when the image is viewed 1:1 with the monitor):

And here is a progressing of colors from left to right that I found demonstrating that dithering in one direction already occurs:

5e0302

5d0302

5e0402

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.

If you go to
https://uigradients.com/#Aubergine
The colors are this
#20002c
→
#cbb4d4

But in the show all gradients displays this

Maybe I'm wrong...should we end the sentence with semicolon on the first background property also ?

I'm using Firefox 57 on GNU/Linux, and when I click on a color code to copy it, my the content of my clipboard doesn't change.

Hello,
Nice Work :)

Is there any possibility on adding rgba values? it will help us to set gradient overlay with background image.

What do all think about adding a user account feature in UI Gradient?
The user would be able to login to the UI gradient and add their own gradient schemes and mark the favourite one on the site as well.

This will help them to access the best gradients very quickly and time-saving.

The true format of the image downloaded from the site is PNG not JPG

Would be awesome if your project could render a HQ image with a click of a button for desktop wallpapers.

Any chance that you can add a rgba option?? to set the opacity of the colors, so you can copy the code with hex code or with rgba

Hi, here are the screenshots
Preview :

Full :

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?

Hi,

I love this beautiful tool. The only issue is sometimes I want a specific gradient palette of a range between two Hex color values, for example, a gradient from red to blue (a very simple example). In this case, I'd suggest a "search" functionality, when given two color values, searching for the closest existing palette that satisfies the range.

Thank you!

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.

I love all the gradients that are on here but it's a bit of a pain trying to navigate between them. Maybe have a grid view, something like this?

uiGradients site is down: https://uigradients.com/

Hi, There are 2 'velvet sun' gradients. Please check.

There's a chance to make this?

Hi,

Does it support any IE version because it is not working inside IE 11.

Best Regards
Usama Ahmed

Is it intentional that this library of gradients only contains gradients between two colors? If so, that should be added to the README -- if not, should that be something we implement?

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!

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 :)

I think it would be nice to have a Sass equivalent for the CSS code.

// needs latest Compass, add '@import "compass"' to your scss
background-color: #87e0fd; // Old browsers
@include filter-gradient(#87e0fd, #05abe0, vertical); // IE6-9
@include background-image(linear-gradient(top,  #87e0fd 0%,#05abe0 100%));

Source: Ultimate CSS Gradient Generator: http://www.colorzilla.com/gradient-editor/

I could write a merge request if you like this feature, it shouldn't be very hard to add :)

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

Hello, today I clone this repo. I npm install and npm run dev.
I see some Vue warning on my browser.

It's also shown on my Visual Studio Code.

This warning is a little annoying,
so I'd like to try to fix this Vue.js key issue by myself.
It would be nice if you could provide some suggestions, Thanks.

it'd be neato

I would like to know your opinions regarding the font color in the following scenario:
I have a Windows application and you can change the background gradient by choosing from a drop-down the one you like. How would you decide if you display the text in black or white depending the gradient?

I'd love to see this with 3 or 4 colors as well. The JS used to make this could accept args.. and any amount of colors could be added.