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-1715194483383-705.css
Created May 8, 2024 18:54
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #33656d, #357781, #388894, #2e919f, #259eaf, #1fb5ca);
    background-size: 1200% 1200%;
    -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-1715194206085-353.css
Created May 8, 2024 18:50
CSS Gradient Animation
.css-selector {
    background: linear-gradient(354deg, #ffafe7, #fd6ff1, #f3ffd0);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 7s ease infinite;
    -moz-animation: AnimationName 7s ease infinite;
    -o-animation: AnimationName 7s ease infinite;
    animation: AnimationName 7s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:50% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1715192458579-903.css
Created May 8, 2024 18:20
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #0f2c74, #12f0c1);
    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-1715192092510-6.css
Created May 8, 2024 18:14
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #e6a9be, #fff4fb, #eb5e9a);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 2s ease infinite;
    -moz-animation: AnimationName 2s ease infinite;
    -o-animation: AnimationName 2s ease infinite;
    animation: AnimationName 2s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
@GradientAnimator
GradientAnimator / grad-1715191477785-995.css
Created May 8, 2024 18:04
CSS Gradient Animation
.css-selector {
    background: linear-gradient(319deg, #0c4cd0, #e37318, #ff0000);
    background-size: 600% 600%;
    -webkit-animation: grad 23s ease infinite;
    -moz-animation: grad 23s ease infinite;
    -o-animation: grad 23s ease infinite;
    animation: grad 23s ease infinite;
}
@-webkit-keyframes grad {
    0%{background-position:5% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1715187222030-325.css
Created May 8, 2024 16:53
CSS Gradient Animation
.css-selector {
    background: linear-gradient(55deg, #f8f8f8, #9ef289);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 8s ease infinite;
    -moz-animation: AnimationName 8s ease infinite;
    -o-animation: AnimationName 8s ease infinite;
    animation: AnimationName 8s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 23%}
@GradientAnimator
GradientAnimator / hero-home-1715186838113-378.css
Created May 8, 2024 16:47
CSS Gradient Animation
.css-selector {
    background: linear-gradient(127deg, #10100e, #310fd1, #ff6157, #520c33, #23c0bf);
    background-size: 1000% 1000%;
    -webkit-animation: hero-home 38s ease infinite;
    -moz-animation: hero-home 38s ease infinite;
    -o-animation: hero-home 38s ease infinite;
    animation: hero-home 38s ease infinite;
}
@-webkit-keyframes hero-home {
    0%{background-position:0% 50%}
@GradientAnimator
GradientAnimator / hero-home-1715186708419-901.css
Created May 8, 2024 16:45
CSS Gradient Animation
.css-selector {
    background: linear-gradient(127deg, #10100e, #310fd1, #ff6157, #520c33);
    background-size: 800% 800%;
    -webkit-animation: hero-home 38s ease infinite;
    -moz-animation: hero-home 38s ease infinite;
    -o-animation: hero-home 38s ease infinite;
    animation: hero-home 38s ease infinite;
}
@-webkit-keyframes hero-home {
    0%{background-position:0% 50%}
@GradientAnimator
GradientAnimator / AnimationName-1715184380678-880.css
Created May 8, 2024 16:06
CSS Gradient Animation
.css-selector {
    background: linear-gradient(220deg, #00ffbd, #00a3ff, #9800ff, #ff00c8, #00ff58);
    background-size: 1000% 1000%;
    -webkit-animation: AnimationName 13s ease infinite;
    -moz-animation: AnimationName 13s ease infinite;
    -o-animation: AnimationName 13s ease infinite;
    animation: AnimationName 13s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:53% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1715177777100-224.css
Created May 8, 2024 14:16
CSS Gradient Animation
.css-selector {
    background: linear-gradient(227deg, #fee14d, #424b94);
    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:99% 0%}