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.

Clever-SEquence-Logo-Round-Circle.png

Clever Sequence

Web Development
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.

Latest Guides