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

  1. Go to gradient-animator.com by Ian Forrest.
  2. Choose the colors for your gradient. I like using Color Hunt because it has a large variety of color combinations.
  3. Add all the colors, choose the gradient angle, scroll angle, and the speed for your animated gradient. 
  4. Copy the code created by the software.
  5. 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)
  6. Go to advance > Custom CSS and paste the code.
  7. Replace the “.css-selector” attribute with “selector” attribute.

I hope you enjoyed this tip, and please don’t forget to Always Share Knowledge.

Today's

Clever Tip