CSS Gradient Background Animation, Get Source Code

How to create Animated Background using CSS only?

In this article, we'll create a movable gradient animation that gives a beautiful animation effect.


Animated Background using CSS
CSS Animated Background

Hello and welcome back friends to the CodingTuting with Jignesh Panchal. I hope you like our last post Lets get started.


What is the CSS Gradient?

Gradients are the combination of multiple colors that display a smooth transition between all selected colors.

And we'll select 3 colors for the background and 4 colors for the heading. All 3 backgrounds move from left to right and right to left which gives a beautiful CSS background effect. The same work has done for the heading.


Preview of Animated Background CSS Gradient






CSS Gradient Background Animation and Source Code

As you know, I always give a summary of the source code before share it. See How I did this? Don't be hurry for source code.

I'm using Google Fonts in my code. You can use it too or any others as you like.


  • I take a title in <h1> tag and placed it in an <div>
  • I aligned center from vertically and horizontally using CSS Flex.
  • I gave a gradient background with 3 colors to the title. Then increase the size of background 400%
  • Defined a @keyframe animation for changing the background-position.
  • Finally, apply that animation in the <h1> with infinity time.

MovingBackground.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link href="https://fonts.googleapis.com/css?family=Lato|Nanum+Gothic:700|Raleway&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="StyleBackground.css">

    <title>Animated Background</title>
</head>

<body>
    
    <div class="main-container">
        
        <h1 id="heading">CodingTuting</h1>
        
    </div>  
    
</body>

</html>


StyleBackground.css

/*Code by CodingTuting.Com*/
* {
    margin:0;
    padding: 0;
}

.main-container {
    position:relative;
    background-image: -webkit-gradient(linear, left top, right top, from(#E91E63), color-stop(#673AB7), to(#24eb60));
    background-image: linear-gradient(to right, #E91E63, #673AB7, #24eb60);
    background-size: 500%;
    -webkit-animation:moveBackground 5s ease-in-out infinite;
    animation:moveBackground 5s ease-in-out infinite;
}

#heading {
    font-family: roboto;
    font-size: 70px;
    font-weight:800;
    height:100vh;
    letter-spacing: 5px;
    color: #181873;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    
    background: linear-gradient(-45deg, #ffffff, rgb(234, 255, 139), rgb(87, 255, 109), rgb(98, 224, 255));
    color: transparent;
    background-size: 400% 400%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-animation: moveBackground 5s ease infinite;
    animation: moveBackground 5s ease infinite;
}

@-webkit-keyframes moveBackground {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
}

@keyframes moveBackground {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
}


So, this was the simple CSS Gradient Background Animation. Did you like it? Do comment, please. And ask freely if you have any doubt.


Sharing is Caring


Thanks for Reading

Hi, I'm Jignesh Panchal. I'm a Web Developer & Designer. I've started this blog to help the programmers using my experience and skills. You will get solutions and tips about Programming, Web Development etc.

Share this

Related Posts

3 Comments

Write Comments
February 7, 2020 at 4:33 PM delete

I wanted to thank you for this great read!! I definitely enjoying every little bit of it I have you bookmarked to check out new stuff you post. dice for dungeons and dragons

Reply
avatar
February 7, 2020 at 4:37 PM delete

Excellent article. Very interesting to read. I really love to read such a nice article. Thanks! keep rocking. d&d dice sets

Reply
avatar
February 26, 2020 at 11:47 AM delete

When you use a genuine service, you will be able to provide instructions, share materials and choose the formatting style. fabbri shop online

Reply
avatar