Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/saviomartin/gradientking

Never again run out of gradients! 🌈
https://github.com/saviomartin/gradientking

css gradient-generator gradient-king gradients nature-inspired-gradients react

Last synced: 14 days ago
JSON representation

Never again run out of gradients! 🌈

Host: GitHub
URL: https://github.com/saviomartin/gradientking
Owner: saviomartin
License: mit
Created: 2021-02-18T10:44:03.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2022-02-28T23:14:42.000Z (over 2 years ago)
Last Synced: 2024-08-01T02:28:20.174Z (3 months ago)
Topics: css, gradient-generator, gradient-king, gradients, nature-inspired-gradients, react
Language: JavaScript
Homepage: https://dev.di7tazxmp7xob.amplifyapp.com/
Size: 26.7 MB
Stars: 345
Watchers: 1
Forks: 35
Open Issues: 10
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

Gradient King

Never again run out of Gradients✨️

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 📖](https://savio.xyz/introducing-gradient-king-never-again-run-out-of-gradients)

## 🚀 Demo

Try the tool: [Gradient King](https://gradient-king.now.sh/)

## 🧐 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](#-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

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

2. Change the working directory

```bash
cd gradientking
```

3. Install dependencies

```bash
npm install
```

4. Run the app

```bash
npm start
```

🌟 You are all set!

## 🍰 Contributing

Head over to [`data.json`](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

```json
{
"colors": ["#3CA55C", "#B5AC49"]
},
```

After your PR got merged, you'll be automatically appared on [contributors page](https://gradient-king.vercel.app/contributors). Works through Github API.

Please contribute using [GitHub Flow](https://guides.github.com/introduction/flow). Create a branch, add commits, and [open a pull request](https://github.com/saviomartin/gradientking/compare).

Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDUCT`](CODE_OF_CONDUCT.md), and the process for submitting pull requests to us.

## 💻 Built with

- [React](https://reactjs.org/)
- [Jquery](https://jquery.com/)
- [Material UI](http://material-ui.com/): for styling and Icons
- [Animate.css](https://animate.style/): for smooth Animations
- [AOS](https://michalsnik.github.io/aos/): for scroll animations
- [react-router-dom](https://reactrouter.com/web/guides/quick-start): for routing
- [AWS Amplify](https://aws.amazon.com/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

- 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`](LICENSE) file for details.

## 🦄 Deploy

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/project?template=https://github.com/saviomartin/loficlub)
[![netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/saviomartin/loficlub)
[![Deploy to DO](https://www.deploytodo.com/do-btn-blue.svg)](https://cloud.digitalocean.com/apps/new?repo=https://github.com/saviomartin/loficlub)

## 👨‍💻 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 [gradient-king.now.sh/contributors](https://gradient-king.vercel.app/contributors)

## 🙏 Support

This project needs a 🌟 from you

Developed with ❤️ in India 🇮🇳