Mitigate muddy/gray colors in the middle of the background gradient animation

[argyleink]

Current

#app-wrapper {
  background: 
    linear-gradient(47.625deg, rgb(84, 235, 235), rgba(255, 0, 0, 0) 79.475%), 
    linear-gradient(95.25deg, rgb(235, 84, 84), rgba(0, 255, 0, 0) 79.475%)
  ;
}

Proposed (progressive enhancement)

:root {
  --space:;
  @supports (background: linear-gradient(in oklab, #000, #fff)) {
    --space: in oklab;
  }  
}

#app-wrapper {
  background: 
    linear-gradient(47.625deg var(--space), rgb(84, 235, 235), rgba(255, 0, 0, 0) 79.475%), 
    linear-gradient(95.25deg var(--space), rgb(235, 84, 84), rgba(0, 255, 0, 0) 79.475%)
  ;
}

As shown here https://developer.chrome.com/docs/css-ui/high-definition-css-color-guide#color_interpolation, this will interpolate the gradients in a colorspace that's less likely to go through the middle of the space which is desaturated. it should make the bg effect more vibrant!

[xiaoluoboding]

@argyleink Thanks for sharing, I will improve it.