How to Create Animated Background using CSS3 ?

Last Updated : 24 Jul, 2024

Pre-requisite:

Basic html Learn HTML
css Learn css
You will need to have a basic knowledge of Keyframes with css Learn Keyframes

In this article, we are creating the background animation using CSS. The login form is used as a demo and the main intention to design background animation.

HTML code:

In this section, we will design the basic structure of the body.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Create Animated Background
        using CSS3
    </title>
</head>

<body>
    <div class="container">
        <input id="enter" type="textbox"
                placeholder="USERNAME">
        <input id="enter" type="password"
                placeholder="PASSWORD">
        <button id="submit" type="button" >
            <span id="span">SUBMIT</span>
        </button>
        <br>

        <div id="forget">
            <a href="">Create Account</a>
            <a href="">Forget Password?</a>
        </div>
    </div>
</body>

</html>

CSS code:

In this section, we are using some CSS property to design background animation. We are using

linear-gradient()

method and

animation

property to design background.

css

<style>
    body
    {
        display:flex;
        justify-content: center;
        align-items: center;
        background-image:linear-gradient(155deg,
                white, violet, blue, lightblue);
        background-size:450%;
        animation:bganimation 15s infinite;
    }
     
     
    input
    {
        margin-bottom: 16px;
        outline:none;
    }
     
    .container
    {
        background-image:radial-gradient(orange, tomato);
        height:300px;
        width:350px;
        border:black 1.5px solid;
        border-radius: 5%;
        /*box-shadow: 8px 8px 50px black; */
        display:flex;
        justify-content:center;
        align-items:center;    
        flex-direction: column;
    }
     
    #submit
    { 
        outline:none;
        color:black;
        height:31px;
        width:90px;;
        border-radius:20px;
        border-style:none;
        background-color:yellow; 
        font-weight:550;
         
    }
     
    #submit:hover
    {   
        transition:1s;
        font-weight:550;
        background-color:red;
        border:2px solid yellow;
        color:white;
    }
     
    #enter
    {
        color:black;
        height:32px;
        width:250px;
        text-align: center;
        font-size: small;
        border-top-left-radius:20px;
        border-bottom-right-radius:20px;
        border-bottom-left-radius:20px;
        border-style:none;
        background-color:yellow;
    }
     
    #enter:hover
    {
        transition:0.4s;
        background-color:pink;
    }
     
    img[alt="www.000webhost.com"]
    {
        display:none;
    }
     
    a
    {
        font-weight:500;
        font-family:monospace;
        font-size:105%;
        text-decoration:none;
        color:black;
    }
     
    a:hover
    {
        text-decoration:underline;
    }
     
    a:first-child
    {
        margin-right: 28px;
    }
     
    @keyframes bganimation
    {
        0%{
            background-position:0% 50%;
        }
         
        50%{
            background-position:100% 50%;
        }
         
        100%{
            background-position:0% 50%;
        }
    }
</style>

Combining Code:

In this section, we will combine both HTML and CSS code to make a background animation.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        Create Animated Background
        using CSS3
    </title>

    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: linear-gradient(155deg,
                    white, violet, blue, lightblue);
            background-size: 450%;
            animation: bganimation 15s infinite;
        }


        input {
            margin-bottom: 16px;
            outline: none;
        }

        .container {
            background-image: radial-gradient(orange, tomato);
            height: 300px;
            width: 350px;
            border: black 1.5px solid;
            border-radius: 5%;
            /*box-shadow: 8px 8px 50px black; */
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        #submit {
            outline: none;
            color: black;
            height: 31px;
            width: 90px;
            ;
            border-radius: 20px;
            border-style: none;
            background-color: yellow;
            font-weight: 550;

        }

        #submit:hover {
            transition: 1s;
            font-weight: 550;
            background-color: red;
            border: 2px solid yellow;
            color: white;
        }

        #enter {
            color: black;
            height: 32px;
            width: 250px;
            text-align: center;
            font-size: small;
            border-top-left-radius: 20px;
            border-bottom-right-radius: 20px;
            border-bottom-left-radius: 20px;
            border-style: none;
            background-color: yellow;
        }

        #enter:hover {
            transition: 0.4s;
            background-color: pink;
        }

        img[alt="www.000webhost.com"] {
            display: none;
        }

        a {
            font-weight: 500;
            font-family: monospace;
            font-size: 105%;
            text-decoration: none;
            color: black;
        }

        a:hover {
            text-decoration: underline;
        }

        a:first-child {
            margin-right: 28px;
        }

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

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <input id="enter" type="textbox"
                placeholder="USERNAME">
        <input id="enter" type="password"
                placeholder="PASSWORD">
        <button id="submit" type="button">
            <span id="span">SUBMIT</span>
        </button>
        <br>

        <div id="forget">
            <a href="">Create Account</a>
            <a href="">Forget Password?</a>
        </div>
    </div>
</body>

</html>

Output:

How to Create Border Animation using CSS?

helloajaysingh1

Improve

Article Tags :

How to Create Animated Background using CSS3 ?

Similar Reads

Thank You!

What kind of Experience do you want to share?