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

1 Comments:

Write Comments
October 22, 2019 at 12:45 PM delete

Background removal services of product images. This service helps E-commerce websites. Good looking product images improve sales… hire background removal service

Reply
avatar