CSS Gradient Background Animation

byCodingFlicks -June 05, 2022

0

There is no doubt that Gradient colors are attractive to everyone. So if we want to create an appealing website the use of gradient color and animations could play a vital role. Designing a great website requires many things: An interesting and beautiful design, as well as content that is relevant and well-organized. Gradient color techniques can be used to make an element more beautiful. In this article, we will show you how to create a beautiful gradient background animation using only HTML and CSS. We would like you to have a look at the video demo before we move further. That will give you an idea of what the project will look like.

In this blog, we will create a div called 'header' and create a gradient background for the div element. First, we will remove the default margin and padding of the project so that the div element occupies the entire space of the viewport. But you don’t have to limit yourself to using this gradient background for a particular div only. Add this to any element on the webpage: buttons, sections, inputs, and active elements. You can also reveal gradient background animation on hover. After creating the header div i have also created a div called 'header-text' which will be used to put some banner content. In our case, we took a header text and a random paragraph text. you can also include a call-to-action button there. We used CSS flexbox to align the content of the project. We took an animation property for the header div and named it 'animate'. The animation duration is set to 15 seconds so that the gradient color will go from one direction to another in one go and then repeat the animation in the opposite direction. Finally, we have to define the CSS keyframes for the gradient background animation. In the animation, we just have to set different background positions.

You May also like:

CSS Gradient Background Animation [ Source Code ]:

First, create a HTML file with .html extension and then create a CSS file with .css extension. After that, Add the external CSS file to your HTML file. Copy the code from the below code box and paste them into the respective file and save them. Open the project in the browser and see if its works. If the code doesn't work, you can download the source code from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--codingflicks.com-->
<head>
    <meta charset="UTF-8">
    <title>css gradient background animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="header">
        <div class="header-text">
            <h2>Gradient Animation</h2>
            <p>Pure CSS Gradient Animation</p>
        </div>
    </div>
</body>
</html>

ADD CSS:

* {
  margin: 0;
  padding: 0;
}
.header {
    background: linear-gradient(-45deg, red, green, blue, yellow);
    background-size: 400% 400%;
    -webkit-animation: animate 15s ease infinite;
            animation: animate 15s ease infinite;
    height: 100vh;
    animation: animate 15s ease infinite;
}
.header-text {
  display: flex;
  flex-direction: column;
  text-align: center;
  height: 100vh;
  justify-content: center;  
}
.header-text h2 {
  font-size: 80px;
  font-family: allura;
  color: #fff;
}
.header-text p {
  font-size: 26px;
  font-family: montserrat;
  color: #fff;  
}
@-webkit-keyframes animate {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
@keyframes animate {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

I am positive that you have implemented the code successfully. On our website, we frequently publish source code related to front-end development. If you want to know more about what we have to offer, then you should visit our website more often. We would like to thank you for your visit to our website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.