title: How to achieve gradient effect background cut in half on a div?
body: <p>Assuming I have a UI card:</p>
  <pre><code>.card {
    flex-direction: column;
    height: 20rem;
    width: 14rem;
    border-width: 1px;
    border-radius: 0.375rem;
    border-color: #444;
    border-style: solid;
    margin: 1.25rem;
  }
  
  .card-header {
    display: flex;
    justify-content: center;
  }
  
  .card-center {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  &lt;div class=&quot;card&quot;&gt;
    &lt;div class=&quot;card-header&quot;&gt;
      &lt;span&gt;header&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class=&quot;card-center&quot;&gt;
      &lt;span&gt;center&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://jsfiddle.net/2wouyex4/" rel="nofollow noreferrer">https://jsfiddle.net/2wouyex4/</a></p>
  <p><a href="https://i.stack.imgur.com/IAMHn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IAMHn.png" alt="enter image description here" /></a></p>
  <p>My question is, how can I achieve this effect:</p>
  <p><a href="https://i.stack.imgur.com/mHnUR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mHnUR.png" alt="enter image description here" /></a></p>
  <p>I need that blue gradient to have height/width so I can manipulate it in javascript (higher height depending on input).</p>
  <p>How can I achieve this?</p>