Initializing, please wait a moment
Gradient Angle
Scroll Angle
Speed
Add colour +

Reset Preview
Please select at least two colours.
background: linear-gradient(270deg);
background-size: ;

-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
-o-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
Functional:

Support to generate css gradient animating with live preview. The output could use with a lot of browser types such as chrome, firefox, safari, opera.

Loading reviews...

Related tools:

FAQ:

How to make a animated gradient scroll in CSS?
To make CSS gradient animator, follow the steps below:

  1. Use this tool generate.
  2. Customize your gradient by selecting the colors, direction, and other options you want.
  3. Click on the "Copy CSS" button to copy the gradient code to your clipboard.
  4. Paste the CSS code into your project's CSS file.
  5. Add the appropriate class name to the element you want to apply the gradient animation to.
  6. Save your changes and preview the page to see the gradient animation in action.

* CSS gradient animator is a tool that helps you create animated gradients for your website or application. It provides a simple and intuitive interface for creating custom gradients and generates the necessary CSS code that you can easily copy and paste into your project. With CSS gradient animator, you can add eye-catching animated gradients to your designs without the need for complex coding.