Лінійний градієнт CSS, пояснюється прикладами

У лінійному градієнті кольори течуть в одному напрямку, наприклад, зліва направо, зверху вниз або будь-який обраний вами кут.

Градієнт із двома кольоровими зупинками

Синтаксис

Для створення лінійного градієнта необхідно визначити принаймні дві кольорові зупинки. Це кольори, серед яких створюються переходи. Це оголошується або у властивостях фону, або у фоновому зображенні .

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);
90 градусів

Використання більше двох кольорів

Ви не обмежуєтесь лише двома кольорами - ви можете використовувати скільки завгодно кольорів, розділених комами.

background: linear-gradient(red, yellow, green); 
Градієнт із 3 кольоровими зупинками

Ви також можете використовувати інші синтаксиси кольорів, такі як RGB або шістнадцяткові коди, щоб вказати кольори.

Жорсткий колір зупиняється

Ви можете не тільки використовувати градієнти для переходу з вицвітанням кольорів, але ви також можете використовувати його для миттєвого переходу з одного суцільного кольору на інший суцільний колір:

background: linear-gradient(to right,red 15%, yellow 15%);
Жорсткий колір зупиняється

Більше інформації:

  • Посібник з CSS: зручний посібник із CSS для розробників