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-1717040276532-900.css
Created May 30, 2024 03:38
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #42cca8, #23a885);
    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-1717034982612-852.css
Created May 30, 2024 02:09
CSS Gradient Animation
.css-selector {
    background: linear-gradient(318deg, #236957, #a148e3);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 14s ease infinite;
    -moz-animation: AnimationName 14s ease infinite;
    -o-animation: AnimationName 14s ease infinite;
    animation: AnimationName 14s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:73% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1717033138069-592.css
Created May 30, 2024 01:38
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #ff9a02, #ff00e5, #ff9a02, #4000c7);
    background-size: 800% 800%;
    -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-1717030085985-940.css
Created May 30, 2024 00:48
CSS Gradient Animation
.css-selector {
    background: linear-gradient(71deg, #246655, #000000);
    background-size: 400% 400%;
    -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:0% 66%}
@GradientAnimator
GradientAnimator / AnimationName-1717023670842-350.css
Created May 29, 2024 23:01
CSS Gradient Animation
.css-selector {
    background: linear-gradient(345deg, #000000, #23abcd);
    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:55% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1717023109013-775.css
Created May 29, 2024 22:51
CSS Gradient Animation
.css-selector {
    background: linear-gradient(312deg, #ffe4a6, #c2a6ff, #ffa6a6);
    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% 9%}
@GradientAnimator
GradientAnimator / AnimationName-1717023028164-205.css
Created May 29, 2024 22:50
CSS Gradient Animation
.css-selector {
    background: linear-gradient(312deg, #ffe4a6, #c2a6ff, #ffa6a6);
    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% 9%}
@GradientAnimator
GradientAnimator / AnimationName-1717019805781-919.css
Created May 29, 2024 21:56
CSS Gradient Animation
.css-selector {
    background: linear-gradient(175deg, #151515, #1859ab);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 26s ease infinite;
    -moz-animation: AnimationName 26s ease infinite;
    -o-animation: AnimationName 26s ease infinite;
    animation: AnimationName 26s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:92% 0%}
@GradientAnimator
GradientAnimator / gradientbg-1717014789233-515.css
Created May 29, 2024 20:33
CSS Gradient Animation
.css-selector {
    background: linear-gradient(46deg, #000000, #efa21f, #000000, #efa21f);
    background-size: 800% 800%;
    -webkit-animation: gradientbg 11s ease infinite;
    -moz-animation: gradientbg 11s ease infinite;
    -o-animation: gradientbg 11s ease infinite;
    animation: gradientbg 11s ease infinite;
}
@-webkit-keyframes gradientbg {
    0%{background-position:0% 97%}
@GradientAnimator
GradientAnimator / gradientbg-1717014779250-627.css
Created May 29, 2024 20:33
CSS Gradient Animation
.css-selector {
    background: linear-gradient(46deg, #000000, #efa21f, #000000, #efa21f);
    background-size: 800% 800%;
    -webkit-animation: gradientbg 7s ease infinite;
    -moz-animation: gradientbg 7s ease infinite;
    -o-animation: gradientbg 7s ease infinite;
    animation: gradientbg 7s ease infinite;
}
@-webkit-keyframes gradientbg {
    0%{background-position:0% 97%}