DEV Community

Cover image for Generative Linear Gradients Background
Yoav Kadosh
Yoav Kadosh

Posted on • Edited on

Generative Linear Gradients Background

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.

Top comments (0)