palette

modify or remove your color swatches:

please select at least two colors...

animation simulation

visualization of your animation:

animation controls

adjust your animation stats:

speed:

20s

css code

change your animation name and copy code:

CSS code coped to clipboard.

.selector { background-size: 400% 400%;
animation: 15s ease infinite;
background:
}

@keyframes {
0% { background-position: 50% 0% }
50% { background-position: 50% 100% }
0% { background-position: 50% 0% }
}

.selector { background-size: 400% 400%;
animation: AnimationName 15s ease infinite;
background:
}

@keyframes AnimationName {
0% { background-position: 100% 100%; }
25% { background-position: 0% 100%; }
50% { background-position: 0% 0%; }
75% { background-position: 100% 0%; }
100% { background-position: 100% 100%; }
}