Awesome Open Source
Awesome Open Source

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 own gradients
  • Search for colors or authors
  • Seperate page for each gradient
  • Copy 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 public/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

  "id": 104,
  "githubUsername": "saviomatin",
  "colors": [

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

  • Voting (user can upvote a gradient)
  • User authentication
  • Comments
  • Generate gradient from a website URL (in progress โš ๏ธ)
  • Generate gradient from a word, eg: love - red gradient
  • Download Gradient (in progress โš ๏ธ)
  • Chrome extension which does all the features

๐Ÿ›ก๏ธ License

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

๐Ÿฆ„ Deploy

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

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

๐Ÿ™ Support

This project needs a ๐ŸŒŸ from you

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

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (68,711)ย 
react (5,295)ย 
gradients (20)ย 

Find Open Source By Browsing 7,000 Topics Across 59 Categories

Advertising ๐Ÿ“ฆย 10
All Projects
Application Programming Interfaces ๐Ÿ“ฆย 124
Applications ๐Ÿ“ฆย 192
Artificial Intelligence ๐Ÿ“ฆย 78
Blockchain ๐Ÿ“ฆย 73
Build Tools ๐Ÿ“ฆย 113
Cloud Computing ๐Ÿ“ฆย 80
Code Quality ๐Ÿ“ฆย 28
Collaboration ๐Ÿ“ฆย 32
Command Line Interface ๐Ÿ“ฆย 49
Community ๐Ÿ“ฆย 83
Companies ๐Ÿ“ฆย 60
Compilers ๐Ÿ“ฆย 63
Computer Science ๐Ÿ“ฆย 80
Configuration Management ๐Ÿ“ฆย 42
Content Management ๐Ÿ“ฆย 175
Control Flow ๐Ÿ“ฆย 213
Data Formats ๐Ÿ“ฆย 78
Data Processing ๐Ÿ“ฆย 276
Data Storage ๐Ÿ“ฆย 135
Economics ๐Ÿ“ฆย 64
Frameworks ๐Ÿ“ฆย 215
Games ๐Ÿ“ฆย 129
Graphics ๐Ÿ“ฆย 110
Hardware ๐Ÿ“ฆย 152
Integrated Development Environments ๐Ÿ“ฆย 49
Learning Resources ๐Ÿ“ฆย 166
Legal ๐Ÿ“ฆย 29
Libraries ๐Ÿ“ฆย 129
Lists Of Projects ๐Ÿ“ฆย 22
Machine Learning ๐Ÿ“ฆย 347
Mapping ๐Ÿ“ฆย 64
Marketing ๐Ÿ“ฆย 15
Mathematics ๐Ÿ“ฆย 55
Media ๐Ÿ“ฆย 239
Messaging ๐Ÿ“ฆย 98
Networking ๐Ÿ“ฆย 315
Operating Systems ๐Ÿ“ฆย 89
Operations ๐Ÿ“ฆย 121
Package Managers ๐Ÿ“ฆย 55
Programming Languages ๐Ÿ“ฆย 245
Runtime Environments ๐Ÿ“ฆย 100
Science ๐Ÿ“ฆย 42
Security ๐Ÿ“ฆย 396
Social Media ๐Ÿ“ฆย 27
Software Architecture ๐Ÿ“ฆย 72
Software Development ๐Ÿ“ฆย 72
Software Performance ๐Ÿ“ฆย 58
Software Quality ๐Ÿ“ฆย 133
Text Editors ๐Ÿ“ฆย 49
Text Processing ๐Ÿ“ฆย 136
User Interface ๐Ÿ“ฆย 330
User Interface Components ๐Ÿ“ฆย 514
Version Control ๐Ÿ“ฆย 30
Virtualization ๐Ÿ“ฆย 71
Web Browsers ๐Ÿ“ฆย 42
Web Servers ๐Ÿ“ฆย 26
Web User Interface ๐Ÿ“ฆย 210