Building a 4 corners-colors CSS3 gradient

Question

Is it possible to produce the following gradient in CSS :

Answer 1

HIGH QUALITY and PORTABLE

In that answer I compare three solutions - but I found fourth solution which produce HIGH quality image and works on Chrome, Safari, Firefox and Edge - here it is:

.myDiv {
    width: 256px; height: 256px;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml;utf8,%3Csvg preserveAspectRatio='none' viewBox='0 0 1 1' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'%3E%3C/stop%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='1'%3E%3C/stop%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect x='0' y='0' width='1' height='1' fill='url(%23g)'%3E%3C/rect%3E%3C/mask%3E%3ClinearGradient id='a' gradientTransform='rotate(90)'%3E%3Cstop offset='0' stop-color='magenta'%3E%3C/stop%3E%3Cstop offset='1' stop-color='white'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientTransform='rotate(90)'%3E%3Cstop offset='0' stop-color='yellow'%3E%3C/stop%3E%3Cstop offset='1' stop-color='red'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' width='1' height='1' fill='url(%23a)' mask='url(%23m)'%3E%3C/rect%3E%3Crect x='0' y='0' width='1' height='1' fill='url(%23b)' mask='url(%23m)' transform='translate(1,1) rotate(180)'%3E%3C/rect%3E%3C/svg%3E");
}

In this solution we inject SVG dataurl image into CSS style. We can freely change width and height in myDiv (to allow it we use in svg preserveAspectRatio='none', and additionaly background-size: 100% 100%; for firefox support). Colors used inside svg are magenta, white, yellow, red and can be changed to any css-format color. To have compatibility with MS Edge, in solution SVG we change following characters: " to ', < to %3C, > to %3E and # to %23 (info from here).

editable example here. Svg background generator here.