Instead of heavy images, this creates smooth color transitions using radial-gradient backgrounds layered in CSS. Keyframes slowly alter the background-position and scale of these gradients, creating an incredibly smooth, fluid gradient mesh.
<!DOCTYPE html>
<html>
<head>
<title>Gradients</title>
<meta name="category" content="Abstract">
<style>
body {
margin: 0;
height: 100vh;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: diagonalShift 15s ease infinite;
}
@keyframes diagonalShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>
</head>
<body>
</body>
</html>Step-by-step instructions to integrate Gradients into your project.
<style> block into your CSS <script> block before your closing </body> tag position: fixed; inset: 0; z-index: -1 pointer-events: none to the container if the animation blocks clicks