Skip to content

Instantly share code, notes, and snippets.

View GradientAnimator's full-sized avatar

GradientAnimator GradientAnimator

View GitHub Profile
.css-selector {
    background: linear-gradient(317deg, #0e1df3, #970ef3, #f6ebfd);
    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%}
.css-selector {
    background: linear-gradient(182deg, #055783, #116e7c, #5b962b, #19699d, #0e293b);
    background-size: 1000% 1000%;
    -webkit-animation: see-meets-sun2 24s ease infinite;
    -moz-animation: see-meets-sun2 24s ease infinite;
    -o-animation: see-meets-sun2 24s ease infinite;
    animation: see-meets-sun2 24s ease infinite;
}
@-webkit-keyframes see-meets-sun2 {
    0%{background-position:51% 0%}
.css-selector {
    background: linear-gradient(180deg, #ff7200, #ffffff);
    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:14% 0%}
@GradientAnimator
GradientAnimator / -1716557568580-848.css
Created May 24, 2024 13:32
CSS Gradient Animation
.css-selector {
    background: linear-gradient(115deg, #f02d0e, #a90000, #7a1b1b, #190101);
    background-size: 800% 800%;
    -webkit-animation: 27s ease infinite;
    -moz-animation: 27s ease infinite;
    -o-animation: 27s ease infinite;
    animation: 27s ease infinite;
}
@-webkit-keyframes {
    0%{background-position:86% 0%}
.css-selector {
    background: linear-gradient(111deg, #4cc3a4, #674cc3, #1736d6);
    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% 29%}
.css-selector {
    background: linear-gradient(50deg, #246655, #4a5d58, #ffffff, #ffffff);
    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:76% 0%}
.css-selector {
    background: linear-gradient(270deg, #246655, #4a5d58, #ffffff, #ffffff);
    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%}
.css-selector {
    background: linear-gradient(270deg, #ffffff, #e79338, #8c6c48);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 1s ease infinite;
    -moz-animation: AnimationName 1s ease infinite;
    -o-animation: AnimationName 1s ease infinite;
    animation: AnimationName 1s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
.css-selector {
    background: linear-gradient(221deg, #2ac09a, #0f4537, #020202);
    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% 84%}
.css-selector {
    background: linear-gradient(180deg, #19c89b, #b27057);
    background-size: 400% 400%;
    -webkit-animation: bro 8s ease infinite;
    -moz-animation: bro 8s ease infinite;
    -o-animation: bro 8s ease infinite;
    animation: bro 8s ease infinite;
}
@-webkit-keyframes bro {
    0%{background-position:0% 63%}