Цвет градиента в CSS с процентами

Это пример, используйте свои цвета rgba.

.myheader {  
  background: linear-gradient(to bottom, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%
  }

 .myheader {
  width: 100px;
  height: 100px;
  background: linear-gradient(to bottom, blue 15%, purple 45%, red 90%);       
 }

<div class = "myheader"></div>

Направление to bottom говорит вам, что ваш градиент идет сверху вниз. Итак, если первый цвет составляет 85%, это означает, что он опускается до 85% высоты контейнера.

Инвертируя процент (85% -> 15%), вы можете добиться желаемого результата.

Вам нужно указать точки в порядке возрастания. Просто инвертируйте значения, которые у вас есть (на самом деле вам не нужен фиолетовый цвет, но вы можете добавить его при желании):

body {
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(to bottom, blue 15%, red 90%) center/cover no-repeat;
}

Процентные значения должны возрастать по порядку. (https://developer.mozilla.org/en-US/docs/Web/CSS/linear-градиент)

$mycolor1: blue;
$mycolor2: purple;
$mycolor3: red;

.myheader {
background: linear-gradient(to bottom, $mycolor1 0%, $mycolor2 50%, $mycolor3 90%);
height: 200px;
width: 100px;
}

https://jsfiddle.net/qa1kLmfc/3/

Для вашего градиента вы, вероятно, могли бы использовать только синий и красный.

Каждый дает решение to bottom, но тривиальное решение состоит в том, чтобы рассмотреть to top и сохранить процентные значения, которые вы используете на картинке:

linear-gradient(to top, #mycolor3 10%, #mycolor2 45%, #mycolor1 85%);

пример:

body {
  background: linear-gradient(to top, red 10%, purple 45%, blue 85%);
  margin: 0;
  height: 100vh;
}

Что касается процентного соотношения между (50% и 30%), то это наверное цветовые подсказки (также называемые подсказками цветовой интерполяции). От новая спецификация

Between two color stops there can be a color interpolation hint, which specifies how the colors of the two color stops on either side should be interpolated in the space between them (by default, they interpolate linearly). There can only be at most one color interpolation hint between any two given color stops; using more than that makes the function invalid.

пример:

body {
  background: 
   /* First gradient with hints*/
   linear-gradient(to top, red 10%, purple 45%, blue 85%) left /45% 100%,
   /* Second gradient with hints*/
   linear-gradient(to top, red 10%,27.5% ,purple 45%, 57% ,blue 85%) right/45% 100%;
  
  
  background-repeat:no-repeat;
  margin: 0;
  height: 100vh;
}