Layered Gradient Playground

madsstoumann

Mads Stoumann

Posted on September 17, 2021

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.

💖 💪 🙅 🚩
madsstoumann
Mads Stoumann

Posted on September 17, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related