Как с помощью CSS нарисовать бекграунд из 4-х плавно переходящих цветов?

* { 
  margin: 0; 
  padding: 0; 
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500"> 
 
 
  <defs> 
    <linearGradient id="myLinearGradient1" x1="0%" y1="0%" x2="100%" y2="0%" spreadMethod="pad"> 
      <stop offset="10%" stop-color="#d9c066" stop-opacity="1" /> 
      <stop offset="90%" stop-color="#6ce7f6" stop-opacity="1" /> 
 
    </linearGradient> 
 
  </defs> 
 
  <rect x="0" y="0" width="500" height="500" rx="0" ry="0" style="fill:url(#myLinearGradient1); stroke: #00500;stroke-width:;" /> 
 
</svg>