Skip to content


Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Lofi Club

Gradient King

Never again run out of Gradientsโœจ๏ธ

gradientking licence gradientking forks gradientking stars gradientking issues gradientking pull-requests

gradientking gif

View Demo ยท Report Bug ยท Request Feature

Fed up with searching gradients for your app?

Gradient king can help you. We provide a huge collection of gradients and you could easily choose one. Besides that, we also provides a gradient generator where you could upload your image and grad the gradients from it. How cool is that ๐Ÿ™Œ

Read blog to understand better ๐Ÿ“–

๐Ÿš€ Demo

Try the tool: Gradient King

๐Ÿง Features

Provides you a huge collection of awesome, elegant gradients. You can use it absolutely for free without attribution.

Also provides a gradient generator which would help you generate gradients from your local image.

  • 100+ gradients
  • Generate your gradient local Images
  • Export Gradients as PNG
  • BookMark Gradients
  • Like Gradients โค๏ธ
  • Search for colors
  • Seperate page for each gradient
  • Copy High Quality CSS code of gradients
  • Check for browser support
  • Contributor page, and see your name on the main page and all other pages >>Contributing
  • Elegant animations
  • PWA, Installable app
  • Dark mode
  • Minimal UI, Lightning Fast
  • Fully Responsive

Gradient King is super productive enough to grab the best gradients for your next app. โœจ๏ธ

๐Ÿ› ๏ธ Installation Steps

  1. Clone the repository
git clone
  1. Change the working directory
cd gradientking
  1. Install dependencies
npm install
  1. Run the app
npm start

๐ŸŒŸ You are all set!

๐Ÿฐ Contributing

Head over to data.json and add your gradient at the bottom of the list. Here is an example contribution ๐Ÿ‘‡

Make sure that you have all the required items

  "colors": ["#3CA55C", "#B5AC49"]

After your PR got merged, you'll be automatically appared on contributors page. Works through Github API.

Please contribute using GitHub Flow. Create a branch, add commits, and open a pull request.

Please read CONTRIBUTING for details on our CODE OF CONDUCT, and the process for submitting pull requests to us.

๐Ÿ’ป Built with

๐ŸŒˆ What's next

I'm pretty sure that I will be constantly adding more and more extrordinary features as I consider this as my biggest project till date. These all are the things I have planned to do in next days

  • Comments
  • Generate gradient from a website URL (in progress โš ๏ธ)
  • Generate gradient from a word, eg: love - red gradient
  • Chrome extension which does all the features

๐Ÿ›ก๏ธ License

This project is licensed under the MIT License - see the LICENSE file for details.

๐Ÿฆ„ Deploy

Deploy with Vercel netlify Deploy to DO

๐Ÿ‘จโ€๐Ÿ’ป Thanks to the Awesome Contributors

Gradient King will not occur without you. Thanking all the amazing contributors. Feel free to contribute in the project ๐Ÿ™Œ

Also, check them on

๐Ÿ™ Support

This project needs a ๐ŸŒŸ from you

Developed with โค๏ธ in India ๐Ÿ‡ฎ๐Ÿ‡ณ