How to Create Animated Background using CSS3 ?

Last Updated : 27 Mar, 2020

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.

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

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

<!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> 