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-1717331820502-856.css
Created June 2, 2024 12:37
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #243366, #3568ff, #ff0fe6);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 18s ease infinite;
    -moz-animation: AnimationName 18s ease infinite;
    -o-animation: AnimationName 18s ease infinite;
    animation: AnimationName 18s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 65%}
@GradientAnimator
GradientAnimator / Busigheter-1717323685577-867.css
Created June 2, 2024 10:21
CSS Gradient Animation
.css-selector {
    background: linear-gradient(180deg, #246655, #a0c569, #8e69c5, #e50049);
    background-size: 800% 800%;
    -webkit-animation: Busigheter 0s ease infinite;
    -moz-animation: Busigheter 0s ease infinite;
    -o-animation: Busigheter 0s ease infinite;
    animation: Busigheter 0s ease infinite;
}
@-webkit-keyframes Busigheter {
    0%{background-position:0% 50%}
@GradientAnimator
GradientAnimator / AnimationName-1717319622973-151.css
Created June 2, 2024 09:13
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #000000, #ffffff);
    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% 49%}
@GradientAnimator
GradientAnimator / AnimationName-1717319354330-255.css
Created June 2, 2024 09:09
CSS Gradient Animation
.css-selector {
    background: linear-gradient(317deg, #499bff, #7db63d);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 7s ease infinite;
    -moz-animation: AnimationName 7s ease infinite;
    -o-animation: AnimationName 7s ease infinite;
    animation: AnimationName 7s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 13%}
@GradientAnimator
GradientAnimator / AnimationName-1717314996370-44.css
Created June 2, 2024 07:56
CSS Gradient Animation
.css-selector {
    background: linear-gradient(320deg, #7b16f1, #ffffff);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 22s ease infinite;
    -moz-animation: AnimationName 22s ease infinite;
    -o-animation: AnimationName 22s ease infinite;
    animation: AnimationName 22s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
@GradientAnimator
GradientAnimator / AnimationName-1717313568993-790.css
Created June 2, 2024 07:32
CSS Gradient Animation
.css-selector {
    background: linear-gradient(89deg, #5c48f5, #9148e4, #15c6ee, #49ffd0);
    background-size: 800% 800%;
    -webkit-animation: AnimationName 2s ease infinite;
    -moz-animation: AnimationName 2s ease infinite;
    -o-animation: AnimationName 2s ease infinite;
    animation: AnimationName 2s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:39% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1717304975723-422.css
Created June 2, 2024 05:09
CSS Gradient Animation
.css-selector {
    background: linear-gradient(227deg, #4100c1, #439c00, #ff9e00, #fd00ff, #ff3500, #00ffcb);
    background-size: 1200% 1200%;
    -webkit-animation: AnimationName 16s ease infinite;
    -moz-animation: AnimationName 16s ease infinite;
    -o-animation: AnimationName 16s ease infinite;
    animation: AnimationName 16s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:63% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1717302981665-729.css
Created June 2, 2024 04:36
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #246655, #32d5ab);
    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%}
@GradientAnimator
GradientAnimator / AnimationName-1717290653821-992.css
Created June 2, 2024 01:10
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #5fb1f6, #c8e3e3);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 34s ease infinite;
    -moz-animation: AnimationName 34s ease infinite;
    -o-animation: AnimationName 34s ease infinite;
    animation: AnimationName 34s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
@GradientAnimator
GradientAnimator / gradient-1717281880642-836.css
Created June 1, 2024 22:44
CSS Gradient Animation
.css-selector {
    background: linear-gradient(231deg, #246655, #fbfbfb, #31595e, #33d8ed);
    background-size: 800% 800%;
    -webkit-animation: gradient 4s ease infinite;
    -moz-animation: gradient 4s ease infinite;
    -o-animation: gradient 4s ease infinite;
    animation: gradient 4s ease infinite;
}
@-webkit-keyframes gradient {
    0%{background-position:25% 0%}