Gradient progress bar position

Issue

Please, how can I fill the progress block with a gradient by 50% but that the gradient would not shrink but would be static?

It needs to be like this at 50%

body {
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}

#progress {
  width: 50%;
  height: 20px;
  border: 5px solid #000;
  background: none;
}

div {
  width: 50%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(-90deg, rgba(60, 226, 91, 1) 0%, rgba(255, 147, 0, 1) 50%, rgba(247, 3, 3, 1) 100%);
}

<div id="progress">
  <div></div>
</div>

Solution

You could use the clip-path CSS property paired with the inset() CSS function :

body {
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}

#progress {
  width: 50%;
  height: 20px;
  border: 5px solid #000;
  background: none;
}

#progress div {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(-90deg, rgba(60, 226, 91, 1) 0%, rgba(255, 147, 0, 1) 50%, rgba(247, 3, 3, 1) 100%);
  clip-path: inset(0% 50% 0% 0%);
}

<div id="progress">
  <div></div>
</div>

Note that I changed the selector of your div rule to #progress div

Answered By - Tom