Assuming I have a UI card:
.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;
}
<div class="card">
<div class="card-header">
<span>header</span>
</div>
<div class="card-center">
<span>center</span>
</div>
</div>
https://jsfiddle.net/2wouyex4/
My question is, how can I achieve this effect:
I need that blue gradient to have height/width so I can manipulate it in javascript (higher height depending on input).
How can I achieve this?