jordihales / hypercolor

A curated collection of beautiful premade gradients using default colors from the Tailwind palette as well as a selection of custom color gradients.

A curated collection of beautiful Tailwind CSS gradients using the full range of Tailwind CSS colors. Easily copy and paste the class names, CSS or even save the gradients as an image.

hypercolor's Issues

Buttons don't work

Hi, I found this website and it's really cool.
I only have one problem: I can't click the buttons present in the UI.
I'm talking about these two:

In the browser console I don't get any error, so I don't know what is going on.
Only the button to download the image works.
I'm on Linux and I tried both Chrome and Firefox browsers, I hope it helps.

All flags aren't here

I need the canadian flag but couldn't find it I even used ctrl + f but i it's not there
Error not enough FLAGS
jk bout error that's just me playing with the code feature

Scroll to top button

Is your feature request related to a problem? Please describe.
When scrolling down on both mobile and desktop, it can become quite tedious to scroll back to the top.

Describe the solution you'd like
Add a "Scroll To Top" button next to the "Toggle Theme" button.

This could scroll to the filters as we already have an anchor there.

Describe alternatives you've considered
N/A

Additional context
It could use an icon to save space.

Lack of info about radial gradients

I cannot find any information about how to make the following work in Tailwind: bg-radial-at-b. It doesn't appear to be within the default set of classes. Should tailwind.config.js be extended? If so, would anyone mind sharing it?

[BUG] Missing Local Setup Instructions in Readme

This project is open-source, which means it expects contributors to join.
However, this Readme lacks instructions on setting up the project locally and creating pull requests,
in this information will benefit open-source contributors

If you believe that these need to be done, please assign them to me

Add a 'Copy vanilla CSS' option

As stated here, it would be cool to have a button which copies the vanilla CSS code for a gradient too.

Site is offline

Creating an issue to let people know that the site is offline due to an issue with usage on Vercel.

A ticket has been opened by @jordihales and Vercel are looking into it.

Wrong grainy image downloaded

The grainy image section does not download the selected colors in the select menu.

Some is not work in latest tailwind version

Text gradient

Hi.
I stumbled upon this project today and it was exactly what I needed!
Awesome work.

This is more of a suggestion really, but I wanted to copy the gradient to use it as a text gradient and it would be great to have that as its own button.
This is easily achievable with Tailwind, but I had to google to find an example.
Simply add text-transparent bg-clip-text and it can be used with text.

Only a suggestion. Close if you dont think its worthwhile.

Thanks for a great project.

Scroll to top

Hiya!, would you be willing to accept this change as part of my Hacktoberfest contribution?

I was thinking something like this.

hyper-color.mp4

Please add the Indian flag

Improve sidebar on repo

Is your feature request related to a problem? Please describe.
N/A

Describe the solution you'd like
Let's add the live domain, extra topics, and a description to the sidebar

Describe alternatives you've considered
N/A

Additional context
N/A

Some gradients are not showing

Describe the bug
I just opened https://hypercolor.dev and realized that some gradients are not showing up correctly, you can check by the images. I checked Chrome and Firefox, both fail. I also checked and there are no errors on the console.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://hypercolor.dev/#gradients
2. Scroll down
3. See error

Expected behavior
Gradients should appear.

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu 20.10
• Browser Chrome and Firefox
• Version 87.0.4280.141 and 84.0.2

Error when copying tailwind class for flags.

So because flags don't have direction this is the code i get:
undefined bg-[linear-gradient(180deg,_#ED2939_33.333%,_#FFF_33.333%_66.666%,_#ED2939_66.666%)]

Error - Downloading with grainy gradient generator

Hello,

I tried to download a grainy gradient from the generator, in dev and in prod I have the same preview :

But when I download, I got this image :

I tried with another configuration and I got the same, colors change.

[BUG] Hamburger Menu

Bug 1
When opening the hamburger menu, the cross (close) icon is not present, which affects the user experience.

Bug 2

There is a bug where if a user is on a small device and clicks the hamburger menu to show navigation links and then switches to a large screen, the navigation links are displayed twice on the screen.

https://github.com/jordihales/hypercolor/assets/103263909/4821b60e-1c61-4771-8ecb-026dfb3e79e6

If you believe that these issues need to be resolved, please assign them to me

Something went wrong

The colors are not displayed!

What is bg-radial-at-t in tailwind?

Hey, thank you for this amazing package!

I am using your images for tailwind and they look amazing. However, all images that use "bg-radial-at-t" do not work for me. I tried with latest v2 and v3 from Tailwind. Is this something I need to add in my tailwind config? I could not find bg-radial-at-t at tailwinds website either.

Gradients not showing up

I've clicked to view the Tailwind and code for the associated gradient, neither will display on any of the 20+ gradients I tried. I used the latest Chrome, Edge and FF. Chrome and FF have no js / vue errors to report. I didn't check errors on Edge.

Love the site and appreciate the work.

Tailwind CSS Wordle alignment

On the main page when on medium sized screen the wordle text will not align properly.