Animated Gradient Background Generator Using CSS

Hey Guys, Welcome To Our Codewithrandom Blog, In Today’s Blog We Are Going To See How To Create An Animated Gradient Background Generator Using 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.

50+ HTML, CSS and JavaScript Projects With Source Code

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 Gradient 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.

Create Portfolio Website Using HTML and CSS (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.

HTML Output:-

Css Gradient Animation Generator Code:-

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%;
    }
}

The CSS code in this instance has fewer lines, making it much simpler to comprehend. I’ll make it clear by explaining. Using the background property and the appropriate sizes, we first apply the linear gradient color to the background. The height that needs to be determined during motion is then fixed.

The background change animation was just begun using the animation property as the final step. For that, we first begin it with keyframes and announce the name of the animation, which is mentioned. Then, we fix three values—0%, 50%, and 100%—for the animation to execute at various stages, and we simply change the background’s position at various values. After these, the gradient backdrop animation is complete.

Gym Website Using HTML and CSS (Source Code)

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 Css Gradient Animation Generator:-

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

Video Output Css Gradient Animation:-

Auto Flip Image Using Html And Css (Code Example)

If you find out this Blog helpful, then make sure to search Codewithrandom 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