Design, HTML & CSS

Animated Gradient Background Using Pure CSS

by Erik Briones | October 3, 2018

You might have noticed that the hero section of my homepage has an animated gradient color. Much like below (I tried to create a meaningful screengrab, in vain).

See below:

Erik Briones Homepage with Animated Gradient Background

I have actually done the CSS for this as I was playing around in Codepen (link at the end of this article).

The idea was to create a gradient color that symbolizes “sunrise” to “sunset” then evening. Maybe. 🙂

I did not have one for noontime though. See below animated GIF:

Animated GIF

How I did it

– Checked images of Sunrise and Sunset
– Researched the colors
– Created a linear gradient of the colors (#7E9FC0, #FEFAAB, #FE8C78, #FD7687, #3A1C53))
– Animated the transition using animation CSS

That’s it.

If you want to see the sample code, view it here in Codepen

Please let me know if you have tried it, and show me how your version looks! 🙂

If you got stuck with something let me know too, I might be able to help!

Hit the comments below.


I am currently reading...

Sprint: How to solve big problems and test new ideas in just five days

Jake Knapp with John Zertasky & Braden Kowitz from Google Ventures