How to Create an Animated Gradient Background
I’ve gotten a few DMs of people asking how I animated the gradient background of my Home Page.
The best part is that it doesn’t affect the website’s performance. It’s not a video or anything. It’s just a few lines of CSS code. Don’t worry, it’s literally super easy.
This is how to animated your gradient
- Go to gradient-animator.com by Ian Forrest.
- Choose the colors for your gradient. I like using Color Hunt because it has a large variety of color combinations.
- Add all the colors, choose the gradient angle, scroll angle, and the speed for your animated gradient.
- Copy the code created by the software.
- Go to your page builder, and select the section you want to add your animated gradient to. (We will be using Elementor for this tutorial)
- Go to advance > Custom CSS and paste the code.
- Replace the “.css-selector” attribute with “selector” attribute.
I hope you enjoyed this tip, and please don’t forget to Always Share Knowledge.
We created this section to share everything we learn every day in a simple way. We give you easy-to-follow tutorials, tips and tricks about web development and digital marketing that will help you improve your workflow as well as polish your skills.