CSS Gradient Animator Tool
A simple CSS Gradient Animator tool powered by VueJS, VueX and SASS. Idea behind building this tool is to quickly generate the CSS Gradient Animations which will help the developer have a quick preview of the selected color palettes instantly. Also, the animation code can be quickly copied by pressing the c key.
- Select Color Palettes from the Color Picker
- Customize Gradient Angle and Speed of the Animation
- Copy code via Code Modal or by pressing c key
- Generate random Gradients by pressing the space bar key
- Save Gradients
- Download Gradients as a wallpaper
- Distraction free mode
- Color suggestions
- Customizable Background Position in Animation
- Offline Availability
- Re-order Selected color Palettes
Install docker-compose and run:
docker-compose up
Access app at http://localhost:8080
The following setup assumes that you've Node installed on your system using NVM (preferred). App is supported on Node v12 LTS +
Install Node Modules
yarn install
Once you are done installing the node modules, you can start serving the App either by using Vue UI or by running the following command after navigating it to the directory.
yarn serve
You can also the linting of the app by running
yarn lint
In-order to customize further, you can refer to the Vue CLI configuration reference
You can refer to Libraries & Plugins for configuration info around the Color Picker & Range Slider configuration.
Following are the Libraries and Plugins used to develop the app
an đź‘˝release