DEV Community

loading...
Cover image for Generative Linear Gradients Background

Generative Linear Gradients Background

Yoav Kadosh
Web developer, currently working for Amdocs. Founder of https://gra.dient.art, maintainer of https://github.com/open-amdocs/webrix
Updated on ・1 min read

This background is made from a set of linear gradients that are stacked on top of each other, and are applied to a single div element.

The gradients are made by generating a random color within the given hue range, and generating a set of random color stops, from transparent to the selected color and back.

Being made of gradients, this background is infinitely scalable.

Finally, the gradients are animated by changing the angle of each gradient, using the new CSS Houdini @property syntax.

You can click on the button to generate a new background.

Discussion (0)