Skip to content

Instantly share code, notes, and snippets.

View gordonstevens's full-sized avatar
💭
I may be slow to respond.

Gordon Stevens gordonstevens

💭
I may be slow to respond.
4 followers · 53 following
View GitHub Profile
@GradientAnimator
GradientAnimator / anim-Blue-Pink-Red-0-1716034152938-662.css
Created May 18, 2024 12:09
CSS Gradient Animation
.css-selector {
    background: linear-gradient(232deg, #0002ff, #ff00fe, #ff0060);
    background-size: 600% 600%;
    -webkit-animation: anim-Blue-Pink-Red-0 16s ease infinite;
    -moz-animation: anim-Blue-Pink-Red-0 16s ease infinite;
    -o-animation: anim-Blue-Pink-Red-0 16s ease infinite;
    animation: anim-Blue-Pink-Red-0 16s ease infinite;
}
@-webkit-keyframes anim-Blue-Pink-Red-0 {
    0%{background-position:0% 50%}
@GradientAnimator
GradientAnimator / anim-Blue-Pink-Red-0-1716033657513-804.css
Created May 18, 2024 12:00
CSS Gradient Animation
.css-selector {
    background: linear-gradient(232deg, #0002ff, #ff00fe, #ff0060);
    background-size: 600% 600%;
    -webkit-animation: anim-Blue-Pink-Red-0 25s ease infinite;
    -moz-animation: anim-Blue-Pink-Red-0 25s ease infinite;
    -o-animation: anim-Blue-Pink-Red-0 25s ease infinite;
    animation: anim-Blue-Pink-Red-0 25s ease infinite;
}
@-webkit-keyframes anim-Blue-Pink-Red-0 {
    0%{background-position:0% 50%}
@GradientAnimator
GradientAnimator / anim-Cyan-Orange-Green-0-1716033092154-603.css
Created May 18, 2024 11:51
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #29ddae, #dd8229, #89dd29);
    background-size: 600% 600%;
    -webkit-animation: anim-Cyan-Orange-Green-0 25s ease infinite;
    -moz-animation: anim-Cyan-Orange-Green-0 25s ease infinite;
    -o-animation: anim-Cyan-Orange-Green-0 25s ease infinite;
    animation: anim-Cyan-Orange-Green-0 25s ease infinite;
}
@-webkit-keyframes anim-Cyan-Orange-Green-0 {
    0%{background-position:0% 50%}