JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="fill">
      <stop offset="0%" stop-color="red"/>
      <stop offset="100%" stop-color="green"/>
    </linearGradient>

    <linearGradient id="transparent" y2="1" x2="0">
      <stop offset="0" stop-color="white" stop-opacity="1"/>
      <stop offset="1" stop-color="white" stop-opacity="0"/>
    </linearGradient>
    <mask id="mask" maskContentUnits="objectBoundingBox">
      <rect width="1" height="1" fill="url(#transparent)"/>
    </mask>
  </defs>

  <rect
    fill="url(#fill)"
    mask="url(#mask)"
    x="0"
    y="0"
    width="100%"
    height="100%"
  />
</svg>

CSS

body {
  background: black;
}