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.

4 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

gailoryannotti

March 4, 2022 at 4:27 AM delete

Harrah's Cherokee Casino & Hotel Map & Floor Plans - Mapyro
Harrah's Cherokee Casino 부천 출장마사지 & Hotel is located in the heart 영주 출장마사지 of the Great Smoky 부산광역 출장안마 Mountains of Western North Carolina. The hotel is owned by 익산 출장마사지 Vici 당진 출장마사지 Properties and operated

EmoticonEmoticon

CSS Gradient Background Animation, Get Source Code