CSS Gradient Animator

Gradient Angle

Scroll Angle

Speed

Add colour +

WebKit Gecko Opera

Reset Preview

Please select at least two colours.

Save CSS as Gist

If you find this tool helpful, consider buying me a coffee.

.css-selector {

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