Building a 4 corners-colors CSS3 gradient

Question

Is it possible to produce the following gradient in CSS :

Answer 1

By employing mask-image along with linear gradients, we can accomplish a seamless, 4-colored-corners gradient that only requires an ::after pseudo element.

HTML

SASS

@mixin QuadVertexColors($v0, $v1, $v2, $v3) {

  background: linear-gradient(to bottom, $v0, $v2);

  &::after {

    content: "";
    position: absolute;
    width: inherit;
    height: inherit;
    background: linear-gradient(to bottom, $v1, $v3);
    -webkit-mask-image: linear-gradient(to left, white, transparent);
  }
}

body {

  background-color: #111111;
  padding: 0;
  margin: 0;

  #quad {

    $size: 100vh;

    width: $size;
    height: $size;

    @include QuadVertexColors(red, magenta, yellow, white);
  }
}

CodePen Demo