brightness()
A CSS<percentage>
. Applies a linear multiplier to the drawing, making it appear brighter or darker. A value under 100% darkens the image, while a value over 100% brightens it. A value of 0% will create an image that is completely black, while a value of 100% leaves the input unchanged.
linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%)
clipPathUnits="objectBoundingBox"
можно вот такое соорудить без паттернов<svg>
<!-- Градиент -->
<linearGradient id="linear-gradient">
<stop offset="0%" stop-color="gold"/>
<stop offset="100%" stop-color="teal"/>
</linearGradient>
<!-- Фигура с градиентной заливкой -->
<rect fill="url(#linear-gradient)"
width="100%" height="100%"/>
</svg>