Skip to content

Instantly share code, notes, and snippets.

Avatar

GradientAnimator GradientAnimator

View GitHub Profile
View AnimationName-1619114196966-565.css
.css-selector {
    background: linear-gradient(270deg, #62e8c5, #e8c862);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 6s ease infinite;
    -moz-animation: AnimationName 6s ease infinite;
    -o-animation: AnimationName 6s ease infinite;
    animation: AnimationName 6s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
View AnimationName-1619113579777-633.css
.css-selector {
    background: linear-gradient(357deg, #1d90c0, #3abeba);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 20s ease infinite;
    -moz-animation: AnimationName 20s ease infinite;
    -o-animation: AnimationName 20s ease infinite;
    animation: AnimationName 20s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:51% 0%}
View Chronocut-1619113325502-519.css
.css-selector {
    background: linear-gradient(325deg, #3abeba, #1d90c0);
    background-size: 400% 400%;
    -webkit-animation: Chronocut 26s ease infinite;
    -moz-animation: Chronocut 26s ease infinite;
    -o-animation: Chronocut 26s ease infinite;
    animation: Chronocut 26s ease infinite;
}
@-webkit-keyframes Chronocut {
    0%{background-position:25% 0%}
View AnimationName-1619113020736-627.css
.css-selector {
    background: linear-gradient(270deg, #09d29e, #33584e);
    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:0% 50%}
View AnimationName-1619111693990-103.css
.css-selector {
    background: linear-gradient(270deg, #0e1578, #0c17b4, #000dc8);
    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-1619110721302-237.css
.css-selector {
    background: linear-gradient(270deg, #20cca0, #20cca0);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 32s ease infinite;
    -moz-animation: AnimationName 32s ease infinite;
    -o-animation: AnimationName 32s ease infinite;
    animation: AnimationName 32s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
View AnimationName-1619108200876-624.css
.css-selector {
    background: linear-gradient(120deg, #ec6ca6, #f07e3d, #f8ae64, #ffec5d, #64b664, #587fc0);
    background-size: 1200% 1200%;
    -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:45% 0%}
View AnimationName-1619107315364-94.css
.css-selector {
    background: linear-gradient(234deg, #29362c, #dbbd2e, #96694a, #111514, #98b9c9);
    background-size: 1000% 1000%;
    -webkit-animation: AnimationName 24s ease infinite;
    -moz-animation: AnimationName 24s ease infinite;
    -o-animation: AnimationName 24s ease infinite;
    animation: AnimationName 24s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 68%}
View AnimationName-1619106072213-748.css
.css-selector {
    background: linear-gradient(270deg, #ff0041, #ff3c90);
    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:0% 50%}
View AnimationName-1619104879196-46.css
.css-selector {
    background: linear-gradient(89deg, #ffd200, #f7971e);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 29s ease infinite;
    -moz-animation: AnimationName 29s ease infinite;
    -o-animation: AnimationName 29s ease infinite;
    animation: AnimationName 29s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:69% 0%}