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-1715644367364-127.css
Created May 13, 2024 23:52
CSS Gradient Animation
.css-selector {
    background: linear-gradient(155deg, #000000, #ef3727, #277eef, #efc427, #190c31, #5a00ff);
    background-size: 1200% 1200%;
    -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:18% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1715641985179-292.css
Created May 13, 2024 23:13
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #434343, #212121, #7b7b7b);
    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-1715641949136-232.css
Created May 13, 2024 23:12
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #434343, #212121, #7b7b7b);
    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-1715637850824-33.css
Created May 13, 2024 22:04
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #0027ff, #ffffff);
    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% 50%}
@GradientAnimator
GradientAnimator / AnimationName-1715637147270-691.css
Created May 13, 2024 21:52
CSS Gradient Animation
.css-selector {
    background: linear-gradient(116deg, #d774d9, #690fd7);
    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% 73%}
@GradientAnimator
GradientAnimator / AnimationName-1715635880701-929.css
Created May 13, 2024 21:31
CSS Gradient Animation
.css-selector {
    background: linear-gradient(186deg, #a50606, #7a0000, #000000);
    background-size: 600% 600%;
    -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:51% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1715635817133-83.css
Created May 13, 2024 21:30
CSS Gradient Animation
.css-selector {
    background: linear-gradient(186deg, #a50606, #7a0000, #000000);
    background-size: 600% 600%;
    -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:51% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1715635671661-11.css
Created May 13, 2024 21:27
CSS Gradient Animation
.css-selector {
    background: linear-gradient(119deg, #a50606, #7a0000, #000000);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 25s ease infinite;
    -moz-animation: AnimationName 25s ease infinite;
    -o-animation: AnimationName 25s ease infinite;
    animation: AnimationName 25s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:59% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1715635661885-242.css
Created May 13, 2024 21:27
CSS Gradient Animation
.css-selector {
    background: linear-gradient(119deg, #a50606, #7a0000, #000000);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 25s ease infinite;
    -moz-animation: AnimationName 25s ease infinite;
    -o-animation: AnimationName 25s ease infinite;
    animation: AnimationName 25s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:59% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1715632543700-344.css
Created May 13, 2024 20:35
CSS Gradient Animation
.css-selector {
    background: linear-gradient(272deg, #37d2aa, #e65c28);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 27s ease infinite;
    -moz-animation: AnimationName 27s ease infinite;
    -o-animation: AnimationName 27s ease infinite;
    animation: AnimationName 27s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}