linear-gradient()
Оновлено: 16.01.2023
linear-gradient()
Функція linear-gradient() додає лінійний градієнт до фону елемента. Вона виступає значенням властивості background-image або background.
Синтаксис
background-image: linear-gradient([<кут> | to <позиція>]?, <колір> [, <колір>]*);
Значення
| <кут> | Задає кут нахилу градієнтної лінії, який показує напрямок градієнта. Спочатку пишеться позитивне або від'ємне значення кута, потім до нього разом додається deg.Нулю градусів (або 360º) відповідає градієнт від низу до верху, далі відлік ведеться за годинниковою стрілкою. |
| <цвет> | Являє собою значення кольору (див. колір), за яким іде необов'язкова позиція кольору відносно осі градієнта, її задають у відсотках від 0% до 100% або в будь-яких інших придатних для CSS одиницях. |
| <позиция> | Для запису позиції спочатку пишеться to, а потім додаються ключові слова top, bottom і left, right, а також їхні поєднання. Порядок слів не важливий, можна написати to left top або to top left. У табл. 1 наведено різні позиції і тип одержуваного градієнта для кольорів #fff і #000, по іншому від білого до чорного. |
Застосування кута замість ключових слів дає аналогічний результат тільки для горизонтальних і вертикальних градієнтів.
Приклад
Примітка
Chrome до версії 26, Safari до версії 6.1 і Android до версії 4.4 підтримують -webkit-linear-gradient().
Opera до версії 12.10 підтримує -o-linear-gradient().
Firefox до версії 16 підтримує -moz-linear-gradient().
Усі властивості з префіксами не використовують ключове слово to під час задавання напрямку градієнта.