Skip to content

Instantly share code, notes, and snippets.

View GradientAnimator's full-sized avatar

GradientAnimator GradientAnimator

24 followers · 0 following
View GitHub Profile
@GradientAnimator
GradientAnimator / AnimationName-1717104657229-69.css
Created May 30, 2024 21:30
CSS Gradient Animation
.css-selector {
    background: linear-gradient(215deg, #00ffbd, #00fdff, #d7ff00);
    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%}
@GradientAnimator
GradientAnimator / AnimationName-1717096301829-411.css
Created May 30, 2024 19:11
CSS Gradient Animation
.css-selector {
    background: linear-gradient(139deg, #42d0ac, #3c5f56, #84b011, #b01191);
    background-size: 800% 800%;
    -webkit-animation: AnimationName 21s ease infinite;
    -moz-animation: AnimationName 21s ease infinite;
    -o-animation: AnimationName 21s ease infinite;
    animation: AnimationName 21s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:45% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1717094625201-659.css
Created May 30, 2024 18:43
CSS Gradient Animation
.css-selector {
    background: linear-gradient(2deg, #9f00e8, #00ffe0);
    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%}
@GradientAnimator
GradientAnimator / AnimationName-1717092092071-505.css
Created May 30, 2024 18:01
CSS Gradient Animation
.css-selector {
    background: linear-gradient(180deg, #000000, #656565, #00ff37);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 19s ease infinite;
    -moz-animation: AnimationName 19s ease infinite;
    -o-animation: AnimationName 19s ease infinite;
    animation: AnimationName 19s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:65% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1717083256024-305.css
Created May 30, 2024 15:34
CSS Gradient Animation
.css-selector {
    background: linear-gradient(215deg, #4d784e, #6ea171, #e1d798, #675645, #424756);
    background-size: 1000% 1000%;
    -webkit-animation: AnimationName 16s ease infinite;
    -moz-animation: AnimationName 16s ease infinite;
    -o-animation: AnimationName 16s ease infinite;
    animation: AnimationName 16s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:90% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1717080350326-218.css
Created May 30, 2024 14:45
CSS Gradient Animation
.css-selector {
    background: linear-gradient(222deg, #02c50f, #2f6c90);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 31s ease infinite;
    -moz-animation: AnimationName 31s ease infinite;
    -o-animation: AnimationName 31s ease infinite;
    animation: AnimationName 31s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:9% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1717080281035-630.css
Created May 30, 2024 14:44
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #93cde6, #e693c7, #bc93e6, #e493e6, #ebebac);
    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%}
@GradientAnimator
GradientAnimator / AnimationName-1717079889055-189.css
Created May 30, 2024 14:38
CSS Gradient Animation
.css-selector {
    background: linear-gradient(58deg, #45c6ff, #90e1ff, #2aa6e9);
    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% 97%}
@GradientAnimator
GradientAnimator / AnimationName-1717077928312-794.css
Created May 30, 2024 14:05
CSS Gradient Animation
.css-selector {
    background: linear-gradient(222deg, #ff0000, #bd2b2b, #b72fb2, #ff00f5);
    background-size: 800% 800%;
    -webkit-animation: AnimationName 9s ease infinite;
    -moz-animation: AnimationName 9s ease infinite;
    -o-animation: AnimationName 9s ease infinite;
    animation: AnimationName 9s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 84%}
@GradientAnimator
GradientAnimator / AnimationName-1717072055381-709.css
Created May 30, 2024 12:27
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #000000, #ffffff);
    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:0% 51%}