CSS function linear-gradient()
Опис
linear−gradient() - це CSS-функція, яка слугує для створення лінійних градієнтів, що забезпечують плавний перехід кольорів вздовж лінії. Цей метод дозволяє створювати захоплюючі градієнтні ефекти та налаштовувати зовнішній вигляд ваших веб-елементів на веб-сайті.
Щоб застосувати linear−gradient(), ви визначаєте кут або напрямок, вздовж якого відбудеться градієнтний перехід. Кольорові зупинки визначають, які кольори будуть використовуватись у градієнті та як довго триватиме перехід між ними.
Наприклад, ви можете створити горизонтальний градієнт від червоного до жовтого:
background: linear-gradient(red, yellow);
Цей приклад створює плавний перехід від червоного до жовтого кольору, простягаючись вздовж елемента. Градієнтні ефекти можуть бути різними - від вертикальних до діагональних, залежно від того, як ви визначите кут або напрямок.
| Нотатка: | Використовуйте |
| Порада: | Експериментуйте з різними кутами або напрямками градієнта, щоб отримати бажаний вигляд. |
| Порада: | Додавайте багато кольорових зупинок, щоб створити складніші градієнти з багатьма переходами. |
| Нотатка: |
|
Синтаксис
linear-gradient([<angle> | to <side-or-corner>]? <color-stop>[, <color-stop>]+)<angle>Кут градієнта в градусах (
deg), радіанах (rad), градах (grad).<side-or-corner>Напрямок градієнта, який може бути одним із значень:
to top,to right,to bottom,to left,to top right,to top left,to bottom right,to bottom left.<color-stop>Колірна зупинка, що складається з кольору і відсоткового значення (необов'язкового), яке вказує, де починається цей колір на градієнті. Наприклад,
red,blue 50%,green 20%.
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
26 |
16 |
7 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
26 |
16 |
7 |
Мобільних переглядачів ще не додано.
Приклади
Наведіть курсор на квадрат, щоб побачити зміну градієнта.
Приклади використання градієнту для фонового кольору.