Как уменьшить крайние цвета градиента?

Question

[spido]

Приветствую!
Есть градиент

background: linear-gradient(90deg, #333, #f00, #333);

Как можно уменьшить площадь крайних цветов #333 и #333? Поджать #333 и #333 к краям, а цвет #f00 должен занимать наибольшую площадь.

Заранее спасибо за любую помощь!

Answer 1

[Арсений Огузов]

Можно указать конкретное положение цвета процентами

background: linear-gradient(90deg, #333 0%, #f00 20%, #f00 80%, #333 100%);

В этом примере от начала до 20% фона будет переход от #333 к #f00, затем сплошной #f00 от 20% до 80%, от 80% и до конца займет переход с #f00 до #333.

Альтернативный способ сделать такой же градиент:

background: linear-gradient(90deg, #333, #f00, #f00, #f00, #333);