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-1717413091421-316.css
Created June 3, 2024 11:11
CSS Gradient Animation
.css-selector {
    background: linear-gradient(62deg, #fd9e1a, #ff1900);
    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% 81%}
@GradientAnimator
GradientAnimator / AnimationName-1717395963956-843.css
Created June 3, 2024 06:26
CSS Gradient Animation
.css-selector {
    background: linear-gradient(116deg, #4d6ac3, #c34d76, #60c34d, #faf125);
    background-size: 800% 800%;
    -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% 50%}
@GradientAnimator
GradientAnimator / AnimationName-1717395367752-245.css
Created June 3, 2024 06:16
CSS Gradient Animation
.css-selector {
    background: linear-gradient(224deg, #27d2a6, #d26527);
    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:81% 0%}
@GradientAnimator
GradientAnimator / DrMitkoOldfield-1717394123883-974.css
Created June 3, 2024 05:55
CSS Gradient Animation
.css-selector {
    background: linear-gradient(165deg, #4700d2, #8300d4, #b000d4, #d700d2, #fa00d0);
    background-size: 1000% 1000%;
    -webkit-animation: DrMitkoOldfield 45s ease infinite;
    -moz-animation: DrMitkoOldfield 45s ease infinite;
    -o-animation: DrMitkoOldfield 45s ease infinite;
    animation: DrMitkoOldfield 45s ease infinite;
}
@-webkit-keyframes DrMitkoOldfield {
    0%{background-position:70% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1717394010775-491.css
Created June 3, 2024 05:53
CSS Gradient Animation
.css-selector {
    background: linear-gradient(251deg, #35ae8f, #ae4b35);
    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:0% 50%}
@GradientAnimator
GradientAnimator / AnimationName-1717392756007-297.css
Created June 3, 2024 05:32
CSS Gradient Animation
.css-selector {
    background: linear-gradient(165deg, #4700d2, #8300d4, #b000d4, #d700d2, #fa00d0);
    background-size: 1000% 1000%;
    -webkit-animation: AnimationName 45s ease infinite;
    -moz-animation: AnimationName 45s ease infinite;
    -o-animation: AnimationName 45s ease infinite;
    animation: AnimationName 45s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:70% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1717392315344-839.css
Created June 3, 2024 05:25
CSS Gradient Animation
.css-selector {
    background: linear-gradient(10deg, #00aeff, #00f2ff, #001cff, #01ffd4);
    background-size: 800% 800%;
    -webkit-animation: AnimationName 41s ease infinite;
    -moz-animation: AnimationName 41s ease infinite;
    -o-animation: AnimationName 41s ease infinite;
    animation: AnimationName 41s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:67% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1717384122063-646.css
Created June 3, 2024 04:08
CSS Gradient Animation
.css-selector {
    background: linear-gradient(278deg, #616dbf, #168f78, #8f1663);
    background-size: 600% 600%;
    -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% 20%}
@GradientAnimator
GradientAnimator / animacion1-1717383730809-76.css
Created June 3, 2024 03:02
CSS Gradient Animation
.css-selector {
    background: linear-gradient(92deg, #ffffff, #000000);
    background-size: 400% 400%;
    -webkit-animation: animacion1 6s ease infinite;
    -moz-animation: animacion1 6s ease infinite;
    -o-animation: animacion1 6s ease infinite;
    animation: animacion1 6s ease infinite;
}
@-webkit-keyframes animacion1 {
    0%{background-position:0% 51%}
@GradientAnimator
GradientAnimator / AnimationName-1717380476477-212.css
Created June 3, 2024 02:07
CSS Gradient Animation
.css-selector {
    background: linear-gradient(205deg, #73ffee, #73ffee);
    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:44% 0%}