У лінійному градієнті кольори течуть в одному напрямку, наприклад, зліва направо, зверху вниз або будь-який обраний вами кут.
Синтаксис
Для створення лінійного градієнта необхідно визначити принаймні дві кольорові зупинки. Це кольори, серед яких створюються переходи. Це оголошується або у властивостях фону, або у фоновому зображенні .
background: linear-gradient(direction, colour-stop1, colour-stop2, ...);Якщо напрямок не вказано, перехід за замовчуванням - зверху вниз.
Приклади
Зверху вниз:
background: linear-gradient(red, yellow);
Зліва до г IGHT:
Для того, щоб зробити його зліва направо, додайте додатковий параметр на початку , linear-gradient()починаючи зі слова на який вказує напрямок:
background: linear-gradient(to right, red , yellow);
Діагональні градієнти :
Ви також можете перевести градієнт по діагоналі, вказавши горизонтальні та вертикальні вихідні положення, наприклад, верхній лівий або нижній правий.
Ось зразок градієнта, що починається зверху ліворуч:
background: linear-gradient(to bottom right, red, yellow);
За допомогою кутів задайте напрямок градієнта
Ви також можете використовувати кути, щоб точніше вказати напрямок градієнта:
background: linear-gradient(angle, colour-stop1, colour-stop2);Кут визначається як кут між горизонтальною лінією та лінією градієнта.
background: linear-gradient(90deg, red, yellow);
Використання більше двох кольорів
Ви не обмежуєтесь лише двома кольорами - ви можете використовувати скільки завгодно кольорів, розділених комами.
background: linear-gradient(red, yellow, green); 
Ви також можете використовувати інші синтаксиси кольорів, такі як RGB або шістнадцяткові коди, щоб вказати кольори.
Жорсткий колір зупиняється
Ви можете не тільки використовувати градієнти для переходу з вицвітанням кольорів, але ви також можете використовувати його для миттєвого переходу з одного суцільного кольору на інший суцільний колір:
background: linear-gradient(to right,red 15%, yellow 15%);
Більше інформації:
- Посібник з CSS: зручний посібник із CSS для розробників