DEV Community

Cover image for Layered Gradient Playground
Mads Stoumann
Mads Stoumann

Posted on

Layered Gradient Playground

A while ago, I saw this tweet by Adam Argyle. It's a clever way of layering gradients, using CSS mask-image. For a new project I'm working on, I want a timeline, where layered background-gradients will change the site’s “look and feel” during the day.

To help me create all these gradients, I built a small tool, based on Adam’s idea:

I hope it's as useful for you, as it's been for me!
The CSS code is rendered at the bottom.

Discussion (0)