Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save GradientAnimator/a6a126f81b1096238a3a14bfe4127ee9 to your computer and use it in GitHub Desktop.
Save GradientAnimator/a6a126f81b1096238a3a14bfe4127ee9 to your computer and use it in GitHub Desktop.
CSS Gradient Animation
.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%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
@-moz-keyframes see-meets-sun2 {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
@-o-keyframes see-meets-sun2 {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
@keyframes see-meets-sun2 {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment