Как работает функция linear-gradient в CSS?

Функция linear-gradient() в CSS создаёт линейный градиент, который распространяется по прямой линии, демонстрируя плавный переход от одного оттенка цвета к другому. puzzleweb.ru metanit.com

Функция принимает два обязательных параметра: направление и цветовые точки. skyeng.ru

Направление градиента можно задать несколькими способами: skyeng.ru

• С помощью ключевых слов: to top, to right, to bottom, to left, а также их комбинаций (to top right, to bottom left и т. д.). purpleschool.ru skyeng.ru
• С помощью угла в градусах (deg). purpleschool.ru skyeng.ru Например, 0deg соответствует движению снизу вверх, 90deg — слева направо. purpleschool.ru skyeng.ru

Цветовые точки позволяют указать, где и как цвета должны переходить друг в друга. purpleschool.ru По умолчанию цвета равномерно распределяются от начала до конца градиента. purpleschool.ru

Каждая цветовая остановка определяется двумя параметрами: цвет и позиция в процентах или пикселях. skyeng.ru

Размер градиента соответствует размеру элемента, к которому он применён. puzzleweb.ru

Современные браузеры обрабатывают градиенты как самостоятельные изображения, что позволяет применять их к фону элементов, кнопкам, текстовым блокам и другим компонентам сайта. skyeng.ru