Skip to content

Instantly share code, notes, and snippets.

View GradientAnimator's full-sized avatar

GradientAnimator GradientAnimator

25 followers · 0 following
View GitHub Profile
@GradientAnimator
GradientAnimator / AnimationName-1721825761236-2.css
Created July 24, 2024 12:56
CSS Gradient Animation
.css-selector {
    background: linear-gradient(40deg, #297c9b, #899194, #c69c33);
    background-size: 600% 600%;
    -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:45% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1721823993532-341.css
Created July 24, 2024 12:26
CSS Gradient Animation
.css-selector {
    background: linear-gradient(292deg, #55cdae, #1835be);
    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:71% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1721821217347-740.css
Created July 24, 2024 11:40
CSS Gradient Animation
.css-selector {
    background: linear-gradient(67deg, #4128a8, #a8a528);
    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:48% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1721819409398-480.css
Created July 24, 2024 11:10
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #ffffff, #d3d3d3, #ffffff);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 2s ease infinite;
    -moz-animation: AnimationName 2s ease infinite;
    -o-animation: AnimationName 2s ease infinite;
    animation: AnimationName 2s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
@GradientAnimator
GradientAnimator / AnimationName-1721817951193-94.css
Created July 24, 2024 10:45
CSS Gradient Animation
.css-selector {
    background: linear-gradient(273deg, #3d2f09, #7d5726, #e7c460, #000000);
    background-size: 800% 800%;
    -webkit-animation: AnimationName 59s ease infinite;
    -moz-animation: AnimationName 59s ease infinite;
    -o-animation: AnimationName 59s ease infinite;
    animation: AnimationName 59s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 46%}
@GradientAnimator
GradientAnimator / AnimationName-1721817842209-89.css
Created July 24, 2024 10:44
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #3d2f09, #7d5726, #e7c460, #000000);
    background-size: 800% 800%;
    -webkit-animation: AnimationName 59s ease infinite;
    -moz-animation: AnimationName 59s ease infinite;
    -o-animation: AnimationName 59s ease infinite;
    animation: AnimationName 59s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 49%}
@GradientAnimator
GradientAnimator / AnimationName-1721809022286-786.css
Created July 24, 2024 08:17
CSS Gradient Animation
.css-selector {
    background: linear-gradient(132deg, #00b9ff, #ff00c8);
    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:88% 0%}
@GradientAnimator
GradientAnimator / workerlly-1721804909097-461.css
Created July 24, 2024 07:08
CSS Gradient Animation
.css-selector {
    background: linear-gradient(181deg, #a826d7, #2836bf);
    background-size: 400% 400%;
    -webkit-animation: workerlly 15s ease infinite;
    -moz-animation: workerlly 15s ease infinite;
    -o-animation: workerlly 15s ease infinite;
    animation: workerlly 15s ease infinite;
}
@-webkit-keyframes workerlly {
    0%{background-position:48% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1721791406189-689.css
Created July 24, 2024 04:19
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #ffffff, #000000);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 0s ease infinite;
    -moz-animation: AnimationName 0s ease infinite;
    -o-animation: AnimationName 0s ease infinite;
    animation: AnimationName 0s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
@GradientAnimator
GradientAnimator / AnimationName-1721782837538-819.css
Created July 24, 2024 01:00
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #456624, #ac590f);
    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% 50%}