How to make single div(any element) CSS art - A mini thread 🧵

Spoiler: No magic 🪄 All that's required is patience and knowing your way around some properties 👍

Let's gooo! 👇

Starting with this timelapse ⏳

The "Big" trick? Layered background images 😮

With CSS you can give many backgrounds to an element. Comma separate background images and you're golden ✨🏆

What would this give for a 60px square? 🤔

👉 https://t.co/3N2SzXNn61

It's common that you'll not repeat your background image layers.

Don't repeat yourself(DRY) and drop:

"background-repeat: no-repeat;"

Beneath your background declaration 👍😎

If you watched the timelapse above, it slows where the order of background images are swapped 🤔

Layered backgrounds are a little counter-intuitive because they work the opposite way to z-index stacking. The first is the highest, the last the lowest.

Save the last for backdrop!

What shapes can we make? Pretty much anything that we can > 1 element 😎

Examples? Create quadrilaterals using a linear-gradient from one color to the same color. Create circles with a radial-gradient from one color to transparent with a color