-2

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/

enter image description here

My question is, how can I achieve this effect:

enter image description here

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?

Madd World
  • 45
  • 5
  • 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
  • width/height can be defined using background-size – Temani Afif 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
  • 1
    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
  • I suggest https://www.colorzilla.com/gradient-editor/ – Raphael Jan 19 '21 at 21:29
  • 1
    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

1 Answers1

2

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>
isherwood
  • 58,414
  • 16
  • 114
  • 157