Skip to content

Instantly share code, notes, and snippets.

View GradientAnimator's full-sized avatar

GradientAnimator GradientAnimator

23 followers · 0 following
View GitHub Profile
@GradientAnimator
GradientAnimator / AnimationName-1714104648008-247.css
Created April 26, 2024 04:10
CSS Gradient Animation
.css-selector {
    background: linear-gradient(0deg, #00317f, #7f0600);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 48s ease infinite;
    -moz-animation: AnimationName 48s ease infinite;
    -o-animation: AnimationName 48s ease infinite;
    animation: AnimationName 48s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 17%}
@GradientAnimator
GradientAnimator / AnimationName-1714102675585-348.css
Created April 26, 2024 03:37
CSS Gradient Animation
.css-selector {
    background: linear-gradient(1deg, #3dc8a4, #ec5249, #5ab5df, #e8ea86, #c19ae1, #ecc292);
    background-size: 1200% 1200%;
    -webkit-animation: AnimationName 11s ease infinite;
    -moz-animation: AnimationName 11s ease infinite;
    -o-animation: AnimationName 11s ease infinite;
    animation: AnimationName 11s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 75%}
@GradientAnimator
GradientAnimator / AnimationName-1714098617779-351.css
Created April 26, 2024 02:30
CSS Gradient Animation
.css-selector {
    background: linear-gradient(24deg, #000000, #d236dd, #11ffff, #f287d8);
    background-size: 800% 800%;
    -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% 11%}
@GradientAnimator
GradientAnimator / AnimationName-1714081148997-213.css
Created April 25, 2024 21:39
CSS Gradient Animation
.css-selector {
    background: linear-gradient(118deg, #8b8361, #00f81b, #06e5fd);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 38s ease infinite;
    -moz-animation: AnimationName 38s ease infinite;
    -o-animation: AnimationName 38s ease infinite;
    animation: AnimationName 38s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 73%}
@GradientAnimator
GradientAnimator / AnimationName-1714075729890-820.css
Created April 25, 2024 20:08
CSS Gradient Animation
.css-selector {
    background: linear-gradient(134deg, #000000, #5e5e5e, #8d8d8d);
    background-size: 600% 600%;
    -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% 29%}
@GradientAnimator
GradientAnimator / AnimationName-1714074264208-88.css
Created April 25, 2024 19:44
CSS Gradient Animation
.css-selector {
    background: linear-gradient(130deg, #6800ff, #00ccff, #cdff00, #ffd500);
    background-size: 800% 800%;
    -webkit-animation: AnimationName 56s ease infinite;
    -moz-animation: AnimationName 56s ease infinite;
    -o-animation: AnimationName 56s ease infinite;
    animation: AnimationName 56s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:56% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1714067136515-493.css
Created April 25, 2024 17:45
CSS Gradient Animation
.css-selector {
    background: linear-gradient(210deg, #20a482, #a42025, #0052ff, #2aff00);
    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:46% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1714065601759-118.css
Created April 25, 2024 17:20
CSS Gradient Animation
.css-selector {
    background: linear-gradient(332deg, #0089b9, #cfa455);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 11s ease infinite;
    -moz-animation: AnimationName 11s ease infinite;
    -o-animation: AnimationName 11s ease infinite;
    animation: AnimationName 11s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:39% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1714065505018-990.css
Created April 25, 2024 17:18
CSS Gradient Animation
.css-selector {
    background: linear-gradient(332deg, #0089b9, #cfa455);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 11s ease infinite;
    -moz-animation: AnimationName 11s ease infinite;
    -o-animation: AnimationName 11s ease infinite;
    animation: AnimationName 11s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:39% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1714065358036-909.css
Created April 25, 2024 17:15
CSS Gradient Animation
.css-selector {
    background: linear-gradient(326deg, #0093c1, #00f0ff, #0082ff);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 12s ease infinite;
    -moz-animation: AnimationName 12s ease infinite;
    -o-animation: AnimationName 12s ease infinite;
    animation: AnimationName 12s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:15% 0%}