Join WhatsApp ChannelJoin Now

How To Create Animated Background using CSS

Hello Dev,

Today, i we will show you how to create animated background using CSS. This article will give you simple example of how to create animated background using CSS. you will learn how to create animated background using CSS. So let’s follow few step to create example of how to create animated background using CSS.

Example

<!DOCTYPE html>
<html>
  
<head>
    <title>How To Create Animated Background using CSS</title>
<style>
body {
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: linear-gradient(155deg, #4caf50, #e91e63, #ff9800, #00bcd4);
	background-size: 450%;
	animation: bganimation 15s infinite;
}
.container {
	height: 100vh;
	width: 1170px;
	margin:0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
h3 {
color: #fff;
font-size: 44px;
}

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

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

	100% {
		background-position: 0% 50%;
	}
}
</style>
</head>
  
<body>
    <div class="container">
       <h3>How To Create Animated Background using CSS</h3>
    </div>
</body>
  
</html>

Recommended Posts