CSS Gradient animation

In this post, I will dive into how to create gradient animation as you may have seen on my personal website, and on little detail things in this blog page. We will utilize the use of CSS background-size property to create a moving gradient illusion.

The key to this animation is a big container with a gradient background. And then we animate the background position in X or Y axis, depends on the need. Here is an example of code that I used in helloimela.com.

body {
  animation: gradientAnimation 30s ease infinite;
  background: linear-gradient(270deg,#3095c5,#8e1f80,#bdaa0c);
  background-size: 400% 400%;
}

@keyframe gradientAnimation {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

In this example, I added gradient background in the body container. I added background-size 400% to make it really big, so it will creates a smooth moving without being cut. The rotation of 270deg in the linear-gradient setting, is to create a sloped gradient effect. To generate CSS gradient, I use this tool from Colorspace. (Although if you googled "CSS gradient generator" you will fiind there are many options to choose).