Skip to content

Instantly share code, notes, and snippets.

View GradientAnimator's full-sized avatar

GradientAnimator GradientAnimator

23 followers · 0 following
View GitHub Profile
@GradientAnimator
GradientAnimator / AnimationName-1715626107330-973.css
Created May 13, 2024 18:48
CSS Gradient Animation
.css-selector {
    background: linear-gradient(230deg, #1cecb6, #9839d2, #ca3129);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 26s ease infinite;
    -moz-animation: AnimationName 26s ease infinite;
    -o-animation: AnimationName 26s ease infinite;
    animation: AnimationName 26s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:82% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1715624897197-660.css
Created May 13, 2024 18:28
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #57c782, #39938b, #235e8b);
    background-size: 600% 600%;
    -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% 50%}
@GradientAnimator
GradientAnimator / HomePage-1715623302568-437.css
Created May 13, 2024 18:01
CSS Gradient Animation
.css-selector {
    background: linear-gradient(220deg, #234978, #d19335, #c53ff2, #9da9c0);
    background-size: 800% 800%;
    -webkit-animation: HomePage 14s ease infinite;
    -moz-animation: HomePage 14s ease infinite;
    -o-animation: HomePage 14s ease infinite;
    animation: HomePage 14s ease infinite;
}
@-webkit-keyframes HomePage {
    0%{background-position:7% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1715623228591-669.css
Created May 13, 2024 18:00
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #1d0540, #076242);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 23s ease infinite;
    -moz-animation: AnimationName 23s ease infinite;
    -o-animation: AnimationName 23s ease infinite;
    animation: AnimationName 23s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 51%}
@GradientAnimator
GradientAnimator / AnimationName-1715622698041-794.css
Created May 13, 2024 17:51
CSS Gradient Animation
.css-selector {
    background: linear-gradient(152deg, #2379c8, #c523c8);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 13s ease infinite;
    -moz-animation: AnimationName 13s ease infinite;
    -o-animation: AnimationName 13s ease infinite;
    animation: AnimationName 13s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:17% 0%}
@GradientAnimator
GradientAnimator / placeholder-1715622664019-493.css
Created May 13, 2024 17:51
CSS Gradient Animation
.css-selector {
    background: linear-gradient(270deg, #ff014c, #000000);
    background-size: 400% 400%;
    -webkit-animation: placeholder 1s ease infinite;
    -moz-animation: placeholder 1s ease infinite;
    -o-animation: placeholder 1s ease infinite;
    animation: placeholder 1s ease infinite;
}
@-webkit-keyframes placeholder {
    0%{background-position:0% 50%}
@GradientAnimator
GradientAnimator / AnimationName-1715622149539-898.css
Created May 13, 2024 17:42
CSS Gradient Animation
.css-seletor {
    plano de fundo: gradiente linear ( 270 graus , #7d045f, #ffe60a);
    tamanho do plano de fundo:400% 400%;
    -webkit-animation: Nome da Animação 0s facilidade infinita;
    -moz-animation: Nome da Animação 0s facilidade infinita;
    -o-animação: Nome da Animação 0s facilita infinitamente;
    animação: Nome da Animação 0s facilidade infinita;
}
@-webkit-keyframes Nome da Animação {
    0%{posição de fundo: 0% 49% }
@GradientAnimator
GradientAnimator / AnimationName-1715620908155-691.css
Created May 13, 2024 17:21
CSS Gradient Animation
.css-selector {
    background: linear-gradient(117deg, #5c5859, #47444f, #040303);
    background-size: 600% 600%;
    -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:0% 13%}
@GradientAnimator
GradientAnimator / AnimationName-1715620169894-945.css
Created May 13, 2024 17:09
CSS Gradient Animation
.css-selector {
    background: linear-gradient(215deg, #b6bf31, #e48233, #6054a5);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 10s ease infinite;
    -moz-animation: AnimationName 10s ease infinite;
    -o-animation: AnimationName 10s ease infinite;
    animation: AnimationName 10s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:64% 0%}
@GradientAnimator
GradientAnimator / AnimationName-1715619993968-883.css
Created May 13, 2024 17:06
CSS Gradient Animation
.css-selector {
    background: linear-gradient(215deg, #dee84a, #9c4879, #3b24c7);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 10s ease infinite;
    -moz-animation: AnimationName 10s ease infinite;
    -o-animation: AnimationName 10s ease infinite;
    animation: AnimationName 10s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:64% 0%}