muhammadawaisshaikh/app.js

## app.js
// empty file

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Gradient</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- varient 1 -->
    <div class="gradient-area"></div>

    <!-- varient 2 -->
    <div class="gradient-area-1 texted">
        <div class="content">
            <h2>Animated Gradient</h2>
            <h5>Gradient with pure CSS keyframes and linear function</h5>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>

## style.css
:root {
    --first-color:#ee7752;
    --second-color:#e73c7e;
    --third-color:#23a6d5;
    --fourth-color:#23d5ab;
    --animation-time: 10s;
    --linear-deg: -45deg;
}

body {
    margin: 0;
}

/* varient 1 */
.gradient-area {
    width: 100%;
    height: 400px;

    background: linear-gradient(-45deg, var(--first-color), var(--second-color), var(--third-color), var(--fourth-color));
	background-size: 400% 400%;
	animation: gradient var(--animation-time) ease infinite;
}

/* varient 2 */
.gradient-area-1 {
    width: 100%;
    height: 400px;

    background: linear-gradient(-45deg, var(--third-color), var(--fourth-color), var(--first-color), var(--second-color));
	background-size: 400% 400%;
	animation: gradient var(--animation-time) ease infinite;
}

/* animation  */
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.texted {
    position: relative;
    margin-top: 20px;
}

.texted .content {
    text-align: center;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Animated Gradient</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>

	<!-- varient 1 -->
	<div class="gradient-area"></div>

	<!-- varient 2 -->
	<div class="gradient-area-1 texted">
	<div class="content">
	<h2>Animated Gradient</h2>
	<h5>Gradient with pure CSS keyframes and linear function</h5>
	</div>
	</div>

	<script src="app.js"></script>
	</body>
	</html>
	:root {
	--first-color:#ee7752;
	--second-color:#e73c7e;
	--third-color:#23a6d5;
	--fourth-color:#23d5ab;
	--animation-time: 10s;
	--linear-deg: -45deg;
	}

	body {
	margin: 0;
	}

	/* varient 1 */
	.gradient-area {
	width: 100%;
	height: 400px;

	background: linear-gradient(-45deg, var(--first-color), var(--second-color), var(--third-color), var(--fourth-color));
	background-size: 400% 400%;
	animation: gradient var(--animation-time) ease infinite;
	}

	/* varient 2 */
	.gradient-area-1 {
	width: 100%;
	height: 400px;

	background: linear-gradient(-45deg, var(--third-color), var(--fourth-color), var(--first-color), var(--second-color));
	background-size: 400% 400%;
	animation: gradient var(--animation-time) ease infinite;
	}

	/* animation */
	@keyframes gradient {
	0% {
	background-position: 0% 50%;
	}
	50% {
	background-position: 100% 50%;
	}
	100% {
	background-position: 0% 50%;
	}
	}

	.texted {
	position: relative;
	margin-top: 20px;
	}

	.texted .content {
	text-align: center;
	color: white;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}