Gradient with fading in CSS
<p>My question is about gradient with fading: gradient - from top to bottom, and fading - from left to right. </p>

<p>Example:</p>

<p><a href="https://i.stack.imgur.com/kXjh8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kXjh8.png" alt="enter image description here"></a></p>

<p>The code is:</p>

<pre><code>background-image: 
  linear-gradient(0deg, rgba(198,83,165,.95) 0%, rgba(198,86,51,.95) 100%),
  linear-gradient(90deg, transparent 50%, rgba(0,0,0,.95) 100%);
opacity: 0.949;
</code></pre>

<p>My result is below.</p>

<p><a href="https://i.stack.imgur.com/Kceu1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Kceu1.png" alt="enter image description here"></a></p>

<p>As you see, it doesn't fade the gradient, it looks like separate layer, behind this gradient. Is there any other method of implementing this?</p>