CSS Gradient Animator Generator

Initializing, please wait a moment

Gradient Angle

Scroll Angle

Speed

Add colour +

WebKit Gecko Opera

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.

Share Tweet Share Post

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 dismiss this message.