šŸŽØ Moving Gradient animation with CSS

#2 CSS Tips and Tricks

Subscribe to my newsletter and never miss my upcoming articles

Simple animations can bring a huge difference to your websites. Let's build something simple and unique.

Complete page background animation with CSS moving gradient

The above Codepen example shows a moving gradient animation on the whole body of the website.

Code snippet for the animation effect.

HTML šŸ‘‡

<body>
  <h1>
     Animation effect on "body"
  </h1>
</body>

CSS šŸ‘‡

body {
  background: -webkit-linear-gradient(
    -70deg,
    #a2facf,
    #64acff
  );
  background-size: 400% 400%;
  animation: gradient 5s ease infinite;
}

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

what is actually happening ??

The background size here is 400% 400% and the background is moving. Thus, the animation is happening.

Frame 2.png

Frame 3.png

A lot of cool stuff can be code with this type of animation.

1. šŸŒˆ Rainbow Effect

The above Codepen example shows a šŸŒˆ rainbow effect.

This is similar to the animation that we saw in the previous example but with 7 colors.

2. Loader for cards and simple components.

The above Codepen example shows a loader šŸŒ with the same gradient animation.

3. Implementing the same effect on a button or cards

The above Codepen example shows šŸŒˆ the rainbow effect on a button.

4. On Hover the same animation effect

Animation on hovering on the card

Configurable parameters

ā†’ Changing the background-size

ā†’ Changing the time-duration

ā†’ Changing the degree of the linear gradient.

Now, put on your creative šŸ¤  hats and make an interesting animation effect with moving gradients.

Drop the website link in the comments for which you would be doing it or have done it.

Show your love by Sharing the blog. šŸ¤—

You can find in me on the web šŸŒ

Comments (2)

Rishav Dhar's photo

This is a great write-up, thanks for sharing. I particularly appreciate the variety of CodePen examples given.

Could you have a look at Ian Forrest's CSS Gradient Animator and let us know what you think of it?

Also, how does changing the linear gradient degree impact the animation?

Sourav Dey's photo

Thanks a lot. šŸ¤— Rishav

The CSS Gradient Animator is a great tool. Thanks for sharing getting code snippet by directly setting up the varials. It will be a helpful tool. āœŒ

Check out this example to see how it affects the animation.

In a simple explanation, the value of deg in linear-gradient defines the deg between the line between two gradients and the horizontal line.

You can check this for a detailed description. šŸ‘‡ developer.mozilla.org/en-US/docs/Web/CSS/li..