How to make Animated Background Colors

Today we will see, how you can make animated background colors and add them to the blogger or WordPress or any other site.

Basically, this is a linear gradient animation for background colors you can add this linear gradient animation to your blogger blog for the WordPress site but in this article, I am going to provide you with the steps to add this to the blogger blog.

If you want to add this to your WordPress site then you have to go to your theme editor and then and into the header.php file after then paste the following code which is provided below and now find the navigation list in your header.php file and give it a class gradient-BG.

If you want to add this animated background color or linear gradient animation in blogger you have to follow the steps which are provided below you can set this linear background animation to any element of your web page.

Steps to follow:

1. Go to Blogger Dashboard
2. Go to Theme/Template Section
3. Click Edit HTML
4. Now Search for </head>

To search anything in blogger template section press Ctrl+F and then type term to search and press enter.

5. Copy the code provided below and paste it just after the tag we have found in step 4

<style>
    .gradient-BG {
        background: linear-gradient(-45deg, #f60, #ff8360, #9fffcb, #173753);
        background-size: 400% 400%;
        -webkit-animation: Gradient 15s ease infinite;
        -moz-animation: Gradient 15s ease infinite;
        animation: Gradient 15s ease infinite;
        min-height: 20px;
    }
    @keyframes Gradient {
        0% {
            background-position: 0 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0 50%;
        }
    }
</style>

6. Now search for the element to which you want to add this animated background effect and add the gradient-BG class to it eg: class='gradient-BG'
7. Save Theme/Template

After performing all the steps provided above I think your linear gradient animation will work perfectly fine if it doesn't you may have done some mistakes.

You can resolve those mistakes or errors on your own but if you have any problems you can comment that in the comment section, I will be glad to hear from you and try to answer as soon as possible.

Conclusion:

I hope that you have learned now how to add animated background colors or how to make animated background colors you can also call it how to make linear gradient animation.

If you still have any queries leave that query in the comment section and let me resolve that issue for you.