filling screen with rotating linear-gradient background - css

Question

I have created a rotating linear-gradient background. Unfortunately, as it rotates, in the corners you can see white screen. I am trying to get it so the color fills the viewport with nothing visible but the rotating gradient.
Here is my code so far (done on codepen.io):
HTML
<div class="fade"></div>
CSS
body {
margin: 0;
}
.fade {
background-image: linear-gradient(0deg, red, blue, red);
height: 100vh;
width: 100%;
animation: revolve 1s infinite linear;
}
#keyframes revolve {
from {
transform: scale3d(1,1,1) rotateZ(0deg);
}
to {
transform: scale3d(1,1,1) rotateZ(360deg);
}
}
I originally had the scale3d as (2,2,1). Changing it to (1,1,1) didn't solve anything. I have also tried changing the height and width to greater than 100wv and setting a background-position of center center, but neither of those worked.
Here is the codepen.

Answer 1

Use the vmax unit like below to create a big overflowing square:
body {
margin: 0;
overflow:hidden;
}
.fade {
background-image: linear-gradient(0deg, red, blue, red);
position:absolute;
height: 200vmax;
width: 200vmax;
left:50%;
top:50%;
transform:translate(-50%,-50%);
animation: revolve 1s infinite linear;
}
#keyframes revolve {
to {
transform:translate(-50%,-50%) rotate(360deg);
}
}
<div class="fade"></div>
You can simplify with a pseudo element:
html::before {
content:"";
background-image: linear-gradient(0deg, red, blue, red);
position:fixed;
top:-50vmax;
bottom:-50vmax;
left:-50vmax;
right:-50vmax;
animation: revolve 1s infinite linear;
}
#keyframes revolve {
to {
transform: rotate(360deg);
}
}