Here we will see how to create animated gradient background for webpage. In this example background changed in gradient color and changed in another gradient color. It turns the gradient when changing the background. The background animation continuously changed. This animation purely done by using the simple css3 code.
How to animated Background Gradient:
This example changes the background colors you can change the background color based on the given css3 code in body section.background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
Code for Animated Background Gradient :
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Create Animated Background Gradient using simple css3 </title>
<style>
body {
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
@-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
h1,
h6 {
font-family: 'Open Sans';
font-weight: 300;
text-align: center;
position: absolute;
top: 45%;
right: 0;
left: 0;
}
</style>
</head>
<body>
<h1>Animated Background Gradient using simple css3</h1>
<h2><a href="http://www.sanwebcorner.com">www.sanwebcorner.com</a></h2>
</body>
</html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Create Animated Background Gradient using simple css3 </title>
<style>
body {
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
@-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
h1,
h6 {
font-family: 'Open Sans';
font-weight: 300;
text-align: center;
position: absolute;
top: 45%;
right: 0;
left: 0;
}
</style>
</head>
<body>
<h1>Animated Background Gradient using simple css3</h1>
<h2><a href="http://www.sanwebcorner.com">www.sanwebcorner.com</a></h2>
</body>
</html>
0 Comments