How to Create Animated Background using CSS3 ?
Last Updated :
12 Jul, 2025
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.
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: