How to make Animated Background Colors

Welcome guys in this brand new article one of my friend asked me how can I add navigation menu like yours like it fades out its colors automatically or changes its color automatically. He said to make article about it so that's why in this article I am going to tell you how you can make animated background colors and add them to blogger or wordpress or any other site.

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

If you want to add this in your wordpress site then you have to go to your theme editor and then and in to the header.php file and 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 founded 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 element to which you want to add this animated background effect and add 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 that mistakes or errors on your own but if you have any problem 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 learnt now how to add animated background colors or how to make animated background colors you can also call it as how to make linear gradient animation. If you still have any query leave that query in the comment section and let me resolve that issue for you.

If you want any other article to customise blogger blog on wordpress site leave your comments and comment that topic in the comment section I will write article about it.

source:softwebtuts.com