Gradient Hero: Gradients Collection Website made with Vue.js


The purpose of the Gradient Hero website is to save beautiful gradients for later use and for sharing with everyone. Built with Vue.js and the free package of Google's Firebase server, is serving a beautiful collection of various color gradients, although it can only accommodate 100 visitors at the same time.

Divided in the latest and popular gradients, you can pick between 3 sizes to preview all gradients and 2 sizes, and when cliked upon it copies to your clipboard the following piece of code providing info needed to use it:

background-image:linear-gradient(-225deg, #7742B2 0%, #F180FF 52%, #FD8BD9 100%);

Also, you can sign in using your Google account to submit your own gradients, providing tags and CSS code. Form to submit your gradient:

If you would like to know more about this project, head to its Github repository to study the source code and give it a star!

Author's comments: This site is my own design and also code itself & the site needs funding. If you feel like contributing to the community, please consider donating.