Building a 4 corners-colors CSS3 gradient

Question

Is it possible to produce the following gradient in CSS :

Answer 1

SIMPLE

Just use this background style for your div element:

.myDiv {
  width: 256px;
  height: 256px;
  background: linear-gradient(to top left, white, rgba(255, 153, 150, 0), red), linear-gradient(to top right, yellow, rgba(255, 153, 150, 0), magenta) rgba(255, 153, 150, 1);
}

Where rgba(255, 153, 150, _ ) is the color in the div center and we use it at bottom with a=1 and in gradients with a=0 for Safari compatibility (for other browsers in gradients we can change rgba(255, 153, 150, 0) to transparetn 50%) .

Working, easy to edit example here. Idea source here.

MEDIUM

We need to add and style div :after pseudo element:

.myDiv {
  width: 256px;
  height: 256px;
  background: linear-gradient(to bottom, red, yellow);
}

.myDiv::after {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  background: linear-gradient(to bottom, magenta, white);
  -webkit-mask-image: linear-gradient(to left, white, transparent);
}

Working, easy to edit example here. Idea from TheDarkln answer (i made pure css version).

COMPLEX

.myDivC{
    overflow: hidden;
    background: linear-gradient(45deg, yellow, magenta);
    width:256px; height:256px;  
    position:relative;
    z-index:1;
}

.myDivC:before,.myDivC:after{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
}
.myDivC:before{
    background: red;
    box-shadow: 0 0 140px 64px red;
    z-index:2;
    top: -96%;
    left: -72%;
    opacity: 0.8;
}
.myDivC:after {
    background: white;
    z-index: 3;
    bottom: -96%;
    right: -72%;
    box-shadow: 0 0 100px 64px white;
    opacity: 1;
    border-radius: 100%;
}

Box shadow and more pseud-elements - easy to edit code here. Idea from Gildas.Tambo answer (I choose second solution - first has artefacts "black shadow" on bottom left corner, other solutions not works on Edge).

TEST

It was tested versions:

• simple - on Safari (low but acceptable quality), Chrome, Firefox and Edge

• medium - on Safari, Chrome, Firefox (not works on Edge).

• complex - Chrome, Edge. In Safari and Firefox has "red-box' artefact on left top corner - which can be reduce by change in .myDivC:before{ ... top: -96% ...} to top: -100% but we loose red intensity a little (here),

Below is comparison for 3 versions on chrome:

In simple solution we se more "linearity", the medium has the best quality. The complex quality is lower: asymetry and artefact red rectangle in left upper corner - this can be more clear to see when we change yellow to black in all solutions - here:

Conclusion

• Simple version - works everywhere however gives little bit lower (linear) quality than other solutions (especially on Safari)
• Medium version - gives the best quality but not work on Edge
• Complex version - works everywhere witch quality better than simple but worse than medium version, but code is very unhandy and needs more time to prepare, test and maintain.

UPDATE

Recently I develop solution which has both: high quality and is portable - here.