I'm using the answer by Temani from CSS rainbow gradient loop animation which works well, but I want the background to be scrolling diagonally (-45 deg), not horizontally or vertically. I've already figured out how to change the direction of the gradient and how to sort of make it work, but there's obvious seams where the gradient doesn't line up. How can I change this to make it "seamless"?
html {
min-height:100%;
background: linear-gradient(
-45deg,
rgba(255, 0, 0, 1) 0%,
rgba(255, 154, 0, 1) 10%,
rgba(208, 222, 33, 1) 20%,
rgba(79, 220, 74, 1) 30%,
rgba(63, 218, 216, 1) 40%,
rgba(47, 201, 226, 1) 50%,
rgba(28, 127, 238, 1) 60%,
rgba(95, 21, 242, 1) 70%,
rgba(186, 12, 248, 1) 80%,
rgba(251, 7, 217, 1) 90%,
rgba(255, 0, 0, 1) 100%
)
0 0/200% 200%;
animation: a 2s linear infinite;
}
@keyframes a {
to {
background-position: -200% -200%;
}
}Well I don't know exactly why it has to be 33.33% or 1/3 of the size to make it appear seamless but I guess if it works it works. Just needed to double the gradient and the size and adjusted the animated position.
html {
min-height:100%;
background: linear-gradient(
-45deg,
rgba(255, 0, 0, 1) 0%,
rgba(255, 154, 0, 1) 5%,
rgba(208, 222, 33, 1) 10%,
rgba(79, 220, 74, 1) 15%,
rgba(63, 218, 216, 1) 20%,
rgba(47, 201, 226, 1) 25%,
rgba(28, 127, 238, 1) 30%,
rgba(95, 21, 242, 1) 35%,
rgba(186, 12, 248, 1) 40%,
rgba(251, 7, 217, 1) 45%,
rgba(255, 0, 0, 1) 50%,
rgba(255, 154, 0, 1) 55%,
rgba(208, 222, 33, 1) 60%,
rgba(79, 220, 74, 1) 65%,
rgba(63, 218, 216, 1) 70%,
rgba(47, 201, 226, 1) 75%,
rgba(28, 127, 238, 1) 80%,
rgba(95, 21, 242, 1) 85%,
rgba(186, 12, 248, 1) 90%,
rgba(251, 7, 217, 1) 95%,
rgba(255, 0, 0, 1) 100%
);
background-size: 400% 400%;
background-position: bottom right;
animation: a 2s linear infinite;
}
@keyframes a {
to {
background-position: 33.33% 33.33%;
}
}