title: Gradient with fading in CSS
body: <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>