How to achieve gradient effect background cut in half on a div?

Question

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?

It's fairly easy to set a starting point for a gradient. Not so much to do so on the cross-axis. Do you actually need width control? — isherwood, Jan 19 '21 at 21:26
Yeah, I need that **blue cross-line** and the ability to control height (scratch width), it's like a bucket and the gradient is like water. — Madd World, Jan 19 '21 at 21:27
Either background size, like Temani Afif says, or put your background on an absolutely-positioned `:before` pseudo element. That might be easier to manage with JS. — isherwood, Jan 19 '21 at 21:27
It's very easy to create a gradient, I don't know how to insert a blue crossline and control height. It's a legitimate question and I have been looking for an answer. — Madd World, Jan 19 '21 at 21:29

isherwood · Accepted Answer · 2021-01-19T21:34:27.263

Since you want to control size with scripting I'd probably use a pseudo-element. You can then update position rules as you see fit. The border could be part of the gradient, but I've added it as a separate rule.

.card {
  position: relative;
  flex-direction: column;
  height: 20rem;
  width: 14rem;
  border-width: 1px;
  border-radius: 0.375rem;
  border-color: #444;
  border-style: solid;
  margin: 1.25rem;
}


.card:before {
  position: absolute;
  content: '';
  left: 0;
  top: 20%;
  bottom: 0;
  width: 100%;
  border-top: 3px solid pink;
  background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,
    rgba(125,185,232,0) 100%);
}

.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>

How to achieve gradient effect background cut in half on a div?

1 Answers1