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 / 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%}
@GradientAnimator
GradientAnimator / AnimationName-1715174636712-765.css
Created May 8, 2024 13:23
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #246655, #e6b211, #e65411);
    background-size: 600% 600%;
    -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:50% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1715159864801-777.css
Created May 8, 2024 09:17
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #c28ef2, #f0f28e, #e98ef2);
    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-1715158168089-915.css
Created May 8, 2024 08:49
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #6c5c6f, #b4a34c);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 4s ease infinite;
    -moz-animation: AnimationName 4s ease infinite;
    -o-animation: AnimationName 4s ease infinite;
    animation: AnimationName 4s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
@GradientAnimator
GradientAnimator / AnimationName-1715158102575-281.css
Created May 8, 2024 08:48
CSS Gradient Animation
.css-selector {
    background: linear-gradient(178deg, #83948f, #c7be8f, #63c4c7);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 5s ease infinite;
    -moz-animation: AnimationName 5s ease infinite;
    -o-animation: AnimationName 5s ease infinite;
    animation: AnimationName 5s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:55% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1715158101476-342.css
Created May 8, 2024 08:48
CSS Gradient Animation
.css-selector {
    background: linear-gradient(178deg, #83948f, #c7be8f, #63c4c7);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 5s ease infinite;
    -moz-animation: AnimationName 5s ease infinite;
    -o-animation: AnimationName 5s ease infinite;
    animation: AnimationName 5s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:55% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1715158099184-543.css
Created May 8, 2024 08:48
CSS Gradient Animation
.css-selector {
    background: linear-gradient(178deg, #83948f, #c7be8f, #63c4c7);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 5s ease infinite;
    -moz-animation: AnimationName 5s ease infinite;
    -o-animation: AnimationName 5s ease infinite;
    animation: AnimationName 5s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:55% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1715152324948-138.css
Created May 8, 2024 07:12
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #4fae95, #0bd39e);
    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%}