CSS Animated Gradient Background

Hello friends. Today we are sharing with you another snippet of CSS Animation Examples. In this project, we have created a simple homepage layout and used a gradient animation as its background. Watch the video tutorial below to understand the source code better. We have over 1000+ front-end videos on our YouTube channel. If you like it, please subscribe to our channel.

We hope you watched the video tutorial and understand how the background animation is provided. Here I have taken a header tag and all the elements of the homepage like Navbar, banner text, etc. Then the various elements of the header have been styled. An infinite animation called ''animate'' is set in the header and then gradient background animation is given through CSS Keyframes animation. Below is the source code of the snippet. You can modify and use it as you need.

Animated Gradient Background using CSS [ Source Code ]:

To create the project, you need to create an HTML file and a CSS file. After that, add external CSS to the HTML file. Then copy and paste the source code below into your project.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
	<meta charset="UTF-8">
	<title>Animated Gradient background with pure css and html</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="header">
		<ul>
			<li>
				<a href="#">Home</a>
			</li>
			<li>
				<a href="#">About</a>
			</li>
			<li>
				<a href="#">Portfolio</a>
			</li>
			<li>
				<a href="#">Services</a>
			</li>
			<li>
				<a href="#">Contact</a>
			</li>
		</ul>
		<h2>Animated Background</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, eveniet, explicabo cumque incidunt saepe praesentium?</p>
	</div>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
}
body {
	font-family: ubuntu;
}
.header {
	z-index: 1;
	background: linear-gradient(-45deg, red, green, blue, yellow);
	background-size: 400% 400%;
	width: 100%;
	height: 100vh;
	animation: animate 15s ease infinite;
}
.header ul {
	height: 50px;
	display: flex;
	justify-content: center;
}
.header ul li {
	display: inline-block;
	padding: 40px 15px;
}
.header ul li a {
	text-decoration: none;
	color: #fff;
	text-transform: uppercase;
	font-size: 20px;
	padding: 5px 10px;
}
.header ul li a:hover {
	background: #fff;
	color: #000;
}
.header h2 {
	text-align: center;
	color: #fff;
	font-size: 60px;
	margin-top: 15%;
	margin-bottom: 20px;
}
.header p {
	text-align: center;
	font-size: 18px;
	width: 35%;
	margin: auto;
	color: #ddd;
	line-height: 1.7;
}
@keyframes animate {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

I hope you have been able to implement the code properly. We regularly share front-end development source code on this blog. Visit our blog regularly. Please share the articles of this blog with like-minded people. Thank you for visiting our blog.

Animated Gradient Background using CSS [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

CSS Animated Gradient Background

Animated Gradient Background using CSS [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form