Animated Gradient Background Generator Using HTML And CSS

Animated Gradient Background Generator Using HTML And CSS

Hey Guys, Welcome To Our Blog, In Today’s Blog We Are Going To See How To Create An CSS Animated Gradient Background Using HTML & CSS

A Gradient Is nothing but a combination of several colors which may look attractive. Likewise, A animated gradient background makes the background change to various colors which are an absolute gradient to make it user attractive and eye-catching design for us.

So,  Let’s Begin Creating Our Animated Gradient Background Project By Adding The Source Codes. For That, First, We Are Using The Html Code.

 

HTML CODE For Animated Gradient Background Generator

<div class="d-flex flex-column justify-content-center w-100 h-100">

    <div class="d-flex flex-column justify-content-center align-items-center">
        <h1 class="fw-light text-white m-0">Pure CSS Gradient Background Animation</h1>
        <div class="btn-group my-5">
            <a href="https://codepen-api-export-production.s3.us-west-2.amazonaws.com/zip/PEN/pyBNzX/1578778289271/pure-css-gradient-background-animation.zip" class="btn btn-outline-light" aria-current="page"><i class="fas fa-file-download me-2"></i> SOURCE CODE</a>
            <a href="https://codepen.io/P1N2O/full/pyBNzX" class="btn btn-outline-light">FULL SCREEN <i class="fas fa-expand ms-2"></i></a>
        </div>
        <a href="https://manuel.pinto.dev" class="text-decoration-none">
            <h5 class="fw-light text-white m-0">— Pen by Manuel Pinto —</h5>
        </a>
    </div>
</div>
</div>

Now we just added the HTML code. In this Code, First, we create a div class with a specific name and give the alignment to the center using a justify-content center with a height and width of 100.

100+ Front-end Projects for Web developers (Source Code)

Then we repeat creating another div class, but there is no width or height here. After this, we add an heading which is inside of H1 tag then again we are creating a div class and inside of it we just adding the links for downloading source code and for full screen enabling. But for full screen, there is another certain link that represents the option that needs to be enabled for opening full screen and the respective icons were added to it. Then the div class was closed.

Lastly, We just adding one more line which is to represent the respective author for the code so for that, we are just adding this line.

The HTML code has been completed so now we move on to the CSS to make it an attractive and successful project.

 

CSS CODE For Animated Gradient Background Generator 

body {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    height: 100vh;
}

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

Here the number of lines for CSS code is less so understanding it is a lot easy. Let me explain it simply First we add the linear gradient color for the background using background property with the respective sizes for them. Then we fix the height that needs to be on during animation.

So the last step is we just started animating the background change using the animation property. for that, we first start it with keyframes and call out the animation name which is mentioned after that we fix three values 0%, 50%, and 100% for the animation to perform on different stages and we just make the position of the background change on different values. So after these the animation for the gradient background is done.

Finally, We have Successfully Completed our project but one more thing to do is view the preview of the project in the Output Section.

 

FINAL OUTPUT Of Animated Gradient Background Generator 


Now We have Successfully created our  CSS Animated Gradient Background Using HTML & CSS. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

Auto Flip Image Using Html And Css (Code Example)

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

REFER CODE – Manuel Pinto

WRITTEN BY – Ragunathan S

Share on:

Leave a Comment