Skip to content
Related Articles

Related Articles

How to Create Animated Background using CSS3 ?
  • Difficulty Level : Basic
  • Last Updated : 27 Mar, 2020

Pre-requisite:

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>

Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :