Gradient Color Generator | CSS Gradient Animator

Gradient Angle

Scroll Angle

Add colour +

WebKit Gecko Opera

Reset Preview

Please select at least two colours.

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