title: Gradient color in CSS with percentage
body: <p>I have only basic knowledge on the CSS. I'm trying to give gradient color for one of my ITEM as per below guidelines and the gradient should be vertical.</p>
  
  <p><a href="https://i.stack.imgur.com/n6UxT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n6UxT.png" alt="enter image description here"></a></p>
  
  <p>I tried the below , but only the first color is coming all over the region. I dont understand that 30% and 50%. How to achieve this?</p>
  
  <pre><code> .myheader {  
    background: linear-gradient(to bottom, #mycolor1 85%, #mycolor2 45%, #mycolor3 10%);       
    }
  </code></pre>