DEV Community

Cover image for Generative Linear Gradients Background
Yoav Kadosh
Yoav Kadosh

Posted on • Edited on

3 1

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)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more