CSS Synthwave Sunset… try saying that 5 times fast. Can’t do it, can you?

Don’t worry. No one can.

Pronounceable or not, that’s what you’re getting today, animated and in CSS. If you don’t know what I’m talking about, it’s that sunset with the black bars that every retro wave artist has had on an album cover at some point:

They do this for good reason, of course – it looks freaking awesome.

Now in technicolour!

Well it’s always in technicolour. Come to think of it, a black and white one would be pretty novel.

Anyway here’s what it looks like:

Refresh the page when it’s in view to see the animation.

Each one of those bars is a div, and there’s a loop in SASS that generates the CSS for each one, each time it loops through it adds makes the bar a little thicker and sets the animation delay a little higher. That way they appear on the screen top down. This makes it quite easy to tweak the variables in SASS until you get the results you want.

It’s on github here, do what you want with it, if you’re so inclined. I did it a couple of years ago. If I did it again today, I think a linear gradient might be a much easier way.