CSS Gradient Background Animation, Get Source Code:codingtuting

How to create Animated Background using CSS only?

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

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

Author : Jignesh Panchal

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.

3 Comments

Write Comments

kingseo12

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

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

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

EmoticonEmoticon

CSS Gradient Background Animation, Get Source Code