title: Gradient to accommodate different div sizes
body: <p>I have a gradient which I want to start from left top, it's endpoint can be left as is.</p>
  
  <p>Here are my current testing scenario's:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.test-1{
    height: 200px;
    border: 1px solid red;
  }
  
  .test-2{
    height: 400px;
    border: 1px solid blue;
  }
  .test-3{
    height: 500px;
    border: 1px solid red;
  }
  .test-4{
    height: 600px;
    border: 1px solid blue;
  }
  
  .gradient{
      /* height: 100%;
      width: 100%; */
      padding: 0;
      margin: 0;
      background: 
        linear-gradient(190deg, #FFFFFF 22%, transparent 22.1%), 
        linear-gradient(90deg, #5c9c9b 0%, #8ccdcc 100%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="test-1 gradient"&gt;&lt;/div&gt;
  
  &lt;div class="test-2 gradient"&gt;&lt;/div&gt;
  
  &lt;div class="test-3 gradient"&gt;&lt;/div&gt;
  
  &lt;div class="test-4 gradient"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <ul>
  <li>In <code>.test-1</code>, the div is too small, so its gradient is cutting off at the top. In this case, I would want it to end on the top left corner so it doesn't appear as if it's ending abruptly.</li>
  <li><code>.test-2</code> is the same.</li>
  <li><code>.test-3</code> is fine, it's not ending abruptly.</li>
  <li><code>.test-4</code> is also fine, it not in the top left corner, but it's not cut off.</li>
  </ul>
  
  <p>How can I cater this gradient to accommodate different div sizes?</p>