Wild Ass Gradients Project

I mostly did this project out of a desire to get hands on with CSS Custom Properties. I've used SCSS for a while (I actually did so for this project as well, but just for layout and form styles), but one of the advantages afforded by CSS Custom Properties is that you can use JavaScript to update the CSS Custom Property values on the fly. Sweet.

Otherwise, I think it was my friend Chris Wigington who had made a Facebook post initially about doing some wild ass gradients. Credit to him for the idea. Personally I think these gradients could get even wilder, but I'm happy with this as a springboard.

There's a feature wishlist at the bottom of this README if you would like to contribute, so pull requests are welcome for those or any other code improvements or wild ass ideas.

Functionality

• Select two colors for your gradient
• Use the slider to adjust your gradient angle
• Click the "generate new gradient" button to generate a randomized gradient
• Similarly, the page will generate a randomized gradient on load or reload
• The page will output the CSS code for the generated gradient
• The page will update both the generated gradient and its CSS when gradient colors or angle has changed
• Click the "copy to clipboard" button to copy the CSS output of the generated gradient to your clipboard

Tools

• CSS Custom Properties (for gradient values)
• SCSS (for layout and general styling)
• GitHub Pages for hosting

Future Feature Wishlist

• More than two colors supported
• Radial Gradients
• Maybe some wild ass textures

Screenshot