---
title: "Discussion on \"Moving Gradient animation with CSS 🎨\" | Hashnode"
description: "Discussion on \"Moving Gradient animation with CSS 🎨\". #2 CSS Tips and Tricks"
url: "https://hashnode.com/posts/moving-gradient-animation-with-css/607eb31ec99e200d08f802a7"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [Moving Gradient animation with CSS 🎨](https://blogs.souravdey.space/moving-gradient-animation-with-css?utm_source=hashnode&utm_medium=feed)

#2 CSS Tips and Tricks

Apr 20, 2021 · 2 min read · blogs.souravdey.space  
Updated Jul 29, 2023  
Read the article

-   [#web-development](https://hashnode.com/tag/web-development)
-   [#css](https://hashnode.com/tag/css)
-   [#html5](https://hashnode.com/tag/html5)
-   [#design](https://hashnode.com/tag/design)
-   [#animation](https://hashnode.com/tag/animation)

## Written by

[Sourav Dey](https://hashnode.com/@Souravdey777)

@Souravdey777 · Bengaluru, India

  
[View profile](https://hashnode.com/@Souravdey777)

👨‍💻 Software Developer | ❤ MERN | 💭 Design Thinker | User-Centric Dev. | ☁️ Cloud | Building tech 💻 to solve real 🌍 problems

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.

## Responses 1

Markdown supported · ⌘↵ to post

[Rishav Dhar](https://hashnode.com/@rdhar)

[Apr 20, 2021](https://hashnode.com/posts/moving-gradient-animation-with-css/607eb31ec99e200d08f802a7/comment/607f3167c99e200d08f81345)

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](https://www.gradient-animator.com/) and let us know what you think of it?

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

[Sourav Dey](https://hashnode.com/@Souravdey777)

[Apr 21, 2021](https://hashnode.com/posts/moving-gradient-animation-with-css/607eb31ec99e200d08f802a7/comment/607f3167c99e200d08f81345#reply-607f9953c99e200d08f817a1)

Thanks a lot. 🤗 [Rishav](https://hashnode.com/@rdhar)

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](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. 👇 [developer.mozilla.org/en-US/docs/Web/CSS/linear-g…](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient\())#composition\_of\_a\_linear\_gradient