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:
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:
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.