How to make Animated Background Colors

How to make Animated Background Colors

How to make Animated Background Colors

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

Basically, friends, this is a linear gradient animation for background colours 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 colour 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>
  5. To search anything in blogger template section press Ctrl+F and then type term to search and press enter.
  6. Copy the code provided below and paste it just after the tag we have found in step 4
  7. <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%}}
  8. 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'
  9. 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 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.


I hope that you have learnt now how to add animated background colours or how to make animated background colours 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.

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

No Comment

Help us improve this article by leaving your feedback below.
Add Comment