CSS-градиент
Собирает правило linear-gradient по двум цветам и направлению, с запасным цветом для старых браузеров.
Что делает
Собирает готовое правило linear-gradient по двум цветам и направлению: вы называете, из какого цвета в какой и куда, а на выходе получаете строку для стилей. К ней добавляется запасной сплошной цвет — на случай браузера, который градиент не поймёт, чтобы текст на такой подложке не оказался нечитаемым. Считает браузер на вашем устройстве.
Когда пригодится
Шапка страницы или блок с призывом, где ровная заливка выглядит бедно. Кнопка, которой нужен акцент, но картинку под неё заводить не хочется. Подложка под карточку, плавно уходящая в фон страницы. Нужно быстро перебрать несколько сочетаний и посмотреть, какое живее.
Как заполнить
Первый цвет Цвет, с которого градиент начинается, в виде #6366f1. Это тот край, который окажется в начале выбранного направления: слева, сверху или в верхнем углу. Второй цвет Цвет, в который градиент уходит, в том же виде. Берите оттенки не слишком далёкие друг от друга: переход между близкими цветами выглядит спокойно, а между противоположными посередине появляется грязная полоса. Направление Слева направо и Справа налево — горизонтальный переход, обычная заливка широкого блока. Сверху вниз — вертикальный, удобен, когда блок должен слиться с фоном под ним. По диагонали — переход из угла в угол, живее остальных, часто берут для кнопок и карточек.
Что получится
Две строки CSS: сначала запасная сплошная заливка первым цветом, следом само правило с градиентом. Копируются как есть и вставляются в ваш стиль подряд — браузер, который градиент понимает, применит вторую строку, остальные остановятся на первой. Результат появляется без ожидания, так что перебрать несколько сочетаний недолго. Если потом захочется поменять оттенок, править можно прямо в скопированном значении: структура правила от этого не ломается.
