Discover saviomartin/gradientking Open Source project

Gradient King

Never again run out of Gradients✨️

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

Clone the repository

git clone https://github.com/saviomartin/gradientking.git

Change the working directory

cd gradientking

Install dependencies

npm install

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

React
Jquery
Material UI: for styling and Icons
Animate.css: for smooth Animations
AOS: for scroll animations
react-router-dom: for routing
AWS Amplify: for hosting

🌈 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