Как правильно реализовать линейный градиент, зависимый от процентов?

Question

[Дмитрий]

Добрый день. Требуется реализовать фон (именно фон), задумка состоит в том, что-бы управлять цветом (один цвет) посредством JS. Конечные расчеты в процентах.
Выбрал для этих целей linear-gradient. Лучше объяснить на примере:

body {
  background: linear-gradient(to right, transparent {{35%}}, red 0% {{50%}}, transparent 0%);
}

Выделил фигурными скобками значения, изменяя которые, можно управлять цветом (шириной вертикальной полосы).
Можно ли упростить это решение? Сделать более элегантным? Или может и вовсе будут другие предложения.

Comments

[Роман Дворянов]

Как вариант воспользовться CSS переменными, и менять их через JS, идея такая

body {
  background: linear-gradient(to right, transparent var(--firstColorPercent), red 0% var(--secondColorPercent), transparent 0%);
}

А в js ты уже в документ устанавливаешь нужные значения CSS переменных, например по самому простому

document.body.style = '--firstColorPercent: ' + 35 + '%; --secondColorPercent: ' + 50 + '%;';

[Дмитрий]

Роман Дворянов, Как вариант! Можно ли упростить сам градиент? Убрать лишние цвета и точки?

[Роман Дворянов]

Дмитрий, градиент от двух точек/цветов дальше как фантазии хватит

[Дмитрий]

Роман Дворянов, В том то и дело, что у меня не получилось реализовать то, что необходимо, с помощью двух точек градиента. Это возможно?

[Ankhena]

Дмитрий,

Это возможно?

Да, с помощью background-size

background: linear-gradient(to right, red, red) no-repeat center / 50% 100%;

[Дмитрий]

Ankhena, Пробовал такой вариант. Плох тем, что нужно отдельно считать bg-size в процентах.

[Ankhena]

Дмитрий, не без разницы куда записывать эти проценты?
Хотя, я бы скорее предпочла, чтобы в градиент, так понятнее что происходит.