I wanted to try out dual svg gradients from this stackoverflow answer. The first gradient is top to bottom alpha and the second gradient is left to right color. I put blue underneath the red-yellow-green rect. It works!

<svg viewBox="0 0 100 100">
  <defs>
  <linearGradient id="top-to-bottom-mask" y2="1" x2="0">
    <stop offset="0.4" stop-color="white" stop-opacity="1.0"/>
    <stop offset="1" stop-color="white" stop-opacity="0.0"/>
  </linearGradient>
  <mask id="fade" maskContentUnits="objectBoundingBox">
    <rect width="1" height="1" fill="url(#top-to-bottom-mask)"/>
  </mask>
  <linearGradient id="left-to-right-color" y2="0">
    <stop offset="0.1" stop-color="hsl(0,50%,50%)"/>
    <stop offset="0.5" stop-color="hsl(60,50%,50%)"/>
    <stop offset="0.9" stop-color="hsl(120,50%,50%)"/>
  </linearGradient>
  </defs>
  <rect width="100" height="100"
        fill="url(#left-to-right-color)"
        mask="url(#fade)"/>
</svg>