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-1718087434372-384.css
Created June 11, 2024 06:30
CSS Gradient Animation
.css-selector {
    background: linear-gradient(317deg, #e75c2c, #b51bc9, #c7bc43);
    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-1718081795172-851.css
Created June 11, 2024 04:56
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #246655, #244a66, #c92b2b);
    background-size: 600% 600%;
    -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-1718074835960-5.css
Created June 11, 2024 03:00
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #006cff, #00e8ff);
    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%}
@GradientAnimator
GradientAnimator / AnimationName-1718059517641-262.css
Created June 10, 2024 22:45
CSS Gradient Animation
.css-selector {
    background: linear-gradient(310deg, #53ffd3, #00af82, #af0000);
    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% 54%}
@GradientAnimator
GradientAnimator / AnimationName-1718059476730-48.css
Created June 10, 2024 22:44
CSS Gradient Animation
.css-selector {
    background: linear-gradient(178deg, #ffffff, #e9e9e9);
    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:51% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1718054859467-438.css
Created June 10, 2024 21:27
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #246655, #246566);
    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:19% 0%}
@GradientAnimator
GradientAnimator / GradienteAnimadoEterna-1718049196602-422.css
Created June 10, 2024 19:53
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #7159b9, #000002, #4167ba, #ececec);
    background-size: 800% 800%;
    -webkit-animation: GradienteAnimadoEterna 20s ease infinite;
    -moz-animation: GradienteAnimadoEterna 20s ease infinite;
    -o-animation: GradienteAnimadoEterna 20s ease infinite;
    animation: GradienteAnimadoEterna 20s ease infinite;
}
@-webkit-keyframes GradienteAnimadoEterna {
    0%{background-position:0% 50%}
@GradientAnimator
GradientAnimator / AnimationName-1718048744039-510.css
Created June 10, 2024 19:45
CSS Gradient Animation
.css-selector {
    background: linear-gradient(204deg, #57ceaf, #5cd8ec, #bf5cec);
    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% 74%}
@GradientAnimator
GradientAnimator / AnimationName-1718046837564-141.css
Created June 10, 2024 19:13
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #6ec8b1, #265c4e);
    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-1718041594037-500.css
Created June 10, 2024 17:46
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #2bc19a, #c12b2b);
    background-size: 400% 400%;
    -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:0% 50%}