Moving Gradient animation with CSS 🎨

#2 CSS Tips and Tricks

UpdatedJuly 29, 2023

Hi folks! I am a 👨‍💻 Full-Stack Developer, occasional Designer, and Blogger facilitating the world with User Experience 🧐 as a Design Thinker 💭 and User-Centric Developer 💯 and while also exploring ☁️ Cloud

Working 💼 @HackerRank as a Software Development Engineer 2

🤓 I have a keen interest in 🤝 collaborating with others and empowering others to build digital solutions that solve real-world 🌍 problems. I'm a Creative Technologist who believes that the merger between Design Thinking and Digital Technologies will lead to the building of user-centric solutions that are impactful toward the betterment of business & society.

Comments (1)

Join the discussion

Rishav Dhar5y ago

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 Dey5y ago

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.

https://codepen.io/souravdey777/pen/MWJPxWr

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. 👇 https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient()#composition_of_a_linear_gradient

CSS Tips & Tricks

Part 1 of 2

Up next

Page fade-in animation with CSS 🎨

#1 CSS Tips and Tricks

Complete page background animation with CSS moving gradient

https://codepen.io/souravdey777/pen/poROYza

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%;
  }
}

So, What is 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 coded with this type of animation.

1. 🌈 Rainbow Effect

https://codepen.io/souravdey777/pen/JjEmYRQ

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.

https://codepen.io/souravdey777/pen/dyNgYZY

The above Codepen example shows a loader 🐌 with the same gradient animation.

3. Implementing the same effect on a button or cards

https://codepen.io/souravdey777/pen/WNRaGMB

The above Codepen example shows 🌈 the rainbow effect on a button.

4. On Hover the same animation effect

https://codepen.io/souravdey777/pen/ExZdNav

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. 🤗

Moving Gradient animation with CSS 🎨

Comments (1)

CSS Tips & Tricks

Page fade-in animation with CSS 🎨

More from this blog

My Blog Syndication Strategy 📣

Why Side Projects Compound 🏗️

Product Engineering: The Only Skill That Survives AI 🏗️

7 Years as a Software Engineer: What Actually Changed 💼

Portfolio Website Development 🏗️ - Part 4

Complete page background animation with CSS moving gradient

So, What is happening ??

1. 🌈 Rainbow Effect

2. Loader for cards and simple components.

3. Implementing the same effect on a button or cards

4. On Hover the same animation effect

Configurable parameters

You can find me on the web 🌍

Command Palette

Comments (1)

CSS Tips & Tricks

Page fade-in animation with CSS 🎨

More from this blog

Complete page background animation with CSS moving gradient

So, What is happening ??

1. 🌈 Rainbow Effect

2. Loader for cards and simple components.

3. Implementing the same effect on a button or cards

4. On Hover the same animation effect

Configurable parameters

You can find me on the web 🌍