CSS Gradient Animator Generator
This website uses cookies to analyse traffic (only anonymized and aggregated data), remember your preferences, and serve non-personalized advertisments (using Adsense). More info or if you are already got it, click here to close this message.
LoadingInitializing, 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%}
}

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.

Tags: cssgradientgenerator,css gradient generator,create animating css,change css color,create css gradient animator