Skip to content

Instantly share code, notes, and snippets.

Avatar

GradientAnimator GradientAnimator

View GitHub Profile
View AnimationName-1618734160271-830.css
.css-selector {
    background: linear-gradient(341deg, #00ffbd, #000000);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 1s ease infinite;
    -moz-animation: AnimationName 1s ease infinite;
    -o-animation: AnimationName 1s ease infinite;
    animation: AnimationName 1s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 70%}
View AnimationName-1618734019378-200.css
.css-selector {
    background: linear-gradient(270deg, #00a8d7, #004254);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 7s ease infinite;
    -moz-animation: AnimationName 7s ease infinite;
    -o-animation: AnimationName 7s ease infinite;
    animation: AnimationName 7s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 51%}
View AnimationName-1618726283753-110.css
.css-selector {
    background: linear-gradient(309deg, #47545b, #6b7d79, #8a9b80, #391a57);
    background-size: 800% 800%;
    -webkit-animation: AnimationName 34s ease infinite;
    -moz-animation: AnimationName 34s ease infinite;
    -o-animation: AnimationName 34s ease infinite;
    animation: AnimationName 34s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:15% 0%}
View AnimationName-1618721935062-179.css
.css-selector {
    background: linear-gradient(172deg, #00beff, #00ff7b);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 22s ease infinite;
    -moz-animation: AnimationName 22s ease infinite;
    -o-animation: AnimationName 22s ease infinite;
    animation: AnimationName 22s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:38% 0%}
View Bi-1618721602360-176.css
.css-selector {
    background: linear-gradient(148deg, #fc1491, #00008b);
    background-size: 400% 400%;
    -webkit-animation: Bi 40s ease infinite;
    -moz-animation: Bi 40s ease infinite;
    -o-animation: Bi 40s ease infinite;
    animation: Bi 40s ease infinite;
}
@-webkit-keyframes Bi {
    0%{background-position:0% 83%}
View AnimationName-1618721586452-92.css
.css-selector {
    background: linear-gradient(270deg, #fc1491, #00008b);
    background-size: 400% 400%;
    -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:44% 0%}
View AnimationName-1618719161073-709.css
.css-selector {
    background: linear-gradient(53deg, #c77df2, #66a9ea);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 42s ease infinite;
    -moz-animation: AnimationName 42s ease infinite;
    -o-animation: AnimationName 42s ease infinite;
    animation: AnimationName 42s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 99%}
View AnimationName-1618706376664-126.css
.css-selector {
    background: linear-gradient(270deg, #4a8db5, #934b3e, #24322e, #246655, #246655);
    background-size: 1000% 1000%;
    -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%}
View AnimationName-1618701483994-213.css
.css-selector {
    background: linear-gradient(270deg, #1db890, #d876b3, #1569eb);
    background-size: 600% 600%;
    -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%}
View AnimationName-1618698692906-260.css
.css-selector {
    background: linear-gradient(78deg, #c40bac, #ff0000);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 10s ease infinite;
    -moz-animation: AnimationName 10s ease infinite;
    -o-animation: AnimationName 10s ease infinite;
    animation: AnimationName 10s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 18%}