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 / Yeti Agencia Creativa-1714162289687-439.css
Created April 26, 2024 20:11
CSS Gradient Animation
.css-selector {
    background: linear-gradient(72deg, #0a1f38, #84c614, #bd14c6, #7614c6, #c69b14, #00d0ff, #a8d51c);
    background-size: 1400% 1400%;
    -webkit-animation: YetiAgenciaCreativa 26s ease infinite;
    -moz-animation: YetiAgenciaCreativa 26s ease infinite;
    -o-animation: YetiAgenciaCreativa 26s ease infinite;
    animation: YetiAgenciaCreativa 26s ease infinite;
}
@-webkit-keyframes YetiAgenciaCreativa {
    0%{background-position:0% 78%}
@GradientAnimator
GradientAnimator / AnimationName-1714158247478-572.css
Created April 26, 2024 19:04
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #00ffbd, #ff0000);
    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%}
@GradientAnimator
GradientAnimator / AnimationName-1714154171071-178.css
Created April 26, 2024 17:56
CSS Gradient Animation
.css-selector {
    background: linear-gradient(213deg, #ff00df, #ff009b, #ffffff);
    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% 13%}
@GradientAnimator
GradientAnimator / AnimationName-1714154027795-357.css
Created April 26, 2024 17:53
CSS Gradient Animation
.css-selector {
    background: linear-gradient(314deg, #246657, #d5bd15);
    background-size: 400% 400%;
    -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% 29%}
@GradientAnimator
GradientAnimator / AnimationName-1714140417311-790.css
Created April 26, 2024 14:06
CSS Gradient Animation
.css-selector {
    background: linear-gradient(0deg, #000000, #7e7e7e);
    background-size: 400% 400%;
    -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% 17%}
@GradientAnimator
GradientAnimator / AnimationName-1714135117961-874.css
Created April 26, 2024 12:38
CSS Gradient Animation
.css-selector {
    background: linear-gradient(298deg, #dcf3ff, #baf2ef, #396d7c, #257ca3, #a2d2df);
    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:0% 40%}
@GradientAnimator
GradientAnimator / AnimationName-1714128869187-575.css
Created April 26, 2024 10:54
CSS Gradient Animation
.css-selector {
    background: linear-gradient(223deg, #3900ea, #c100f9, #001af1);
    background-size: 600% 600%;
    -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% 96%}
@GradientAnimator
GradientAnimator / AnimationName-1714116711287-499.css
Created April 26, 2024 07:31
CSS Gradient Animation
.css-selector {
    background: linear-gradient(3deg, #4ed7b4, #b2ca9b);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 33s ease infinite;
    -moz-animation: AnimationName 33s ease infinite;
    -o-animation: AnimationName 33s ease infinite;
    animation: AnimationName 33s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
@GradientAnimator
GradientAnimator / AnimationName-1714116175345-904.css
Created April 26, 2024 07:22
CSS Gradient Animation
.css-selector {
    background: linear-gradient(5deg, #42eabf, #ea6142);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 3s ease infinite;
    -moz-animation: AnimationName 3s ease infinite;
    -o-animation: AnimationName 3s ease infinite;
    animation: AnimationName 3s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:51% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1714115818335-309.css
Created April 26, 2024 07:16
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #ffe79b, #c4fffd, #ffb5b5);
    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:0% 52%}