CSS Background Gradient Animation

This code snippet helps you to create Background Gradient Animation using HTML and CSS. This animated background example is created without using javascript. Four gradient colors are used to make a progressive transition from one corner to another corner running diagonally. You can change the gradient colors, speed, and direction of the transition. This code snippet has defined how you can apply a Gradient Animation to a container and animate it using CSS keyframes.

How to Create Css Background Gradient Animation

Create the HTML structure as follows:

<div class='intro'></div>

Style using the following CSS styles:

body {
  margin: 0;
}

.intro {
  background: url("https://newevolutiondesigns.com/images/freebies/cool-wallpaper-3.jpg"), linear-gradient(233deg, #e56420, #c22525, #3d9c31, #37bbde);
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-blend-mode: hard-light;
  -webkit-animation: hue-rotate 3s linear infinite;
          animation: hue-rotate 3s linear infinite;
}

@-webkit-keyframes hue-rotate {
  from {
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
    filter: hue-rotate(0);
  }
  to {
    -webkit-filter: hue-rotate(360deg);
    -moz-filter: hue-rotate(360deg);
    -ms-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}

@keyframes hue-rotate {
  from {
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
    filter: hue-rotate(0);
  }
  to {
    -webkit-filter: hue-rotate(360deg);
    -moz-filter: hue-rotate(360deg);
    -ms-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}

That’s all! hopefully, you have successfully created Background Gradient Animation. If you have any questions or suggestions, feel free to comment below.