You can aproximate this using two layers and mask:
html {
min-height:100%;
position:relative;
}
html::before,
html::after {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:red;
}
html::before {
filter:hue-rotate(100deg);
-webkit-mask:linear-gradient(to bottom right,#fff,transparent);
}
html::after {
filter:hue-rotate(-100deg);
-webkit-mask:linear-gradient(to top left,#fff,transparent);
}This can also be done with an image:
html {
min-height:100%;
position:relative;
}
html::before,
html::after {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:url(https://i.picsum.photos/id/1074/800/800.jpg) center/cover;
}
html::before {
filter:hue-rotate(150deg);
-webkit-mask:linear-gradient(to bottom right,#fff,transparent);
}
html::after {
filter:hue-rotate(-150deg);
-webkit-mask:linear-gradient(to top left,#fff,transparent);
}