How to control the direction of a linear gradient in CSS?

Направление линейного градиента в CSS можно контролировать двумя способами: html5book.ru skillbox.ru

1. Указать угол. html5book.ru skillbox.ru Угол градиента задаётся в градусах (deg), градах (grad), радианах (rad) или количестве оборотов (turn). skillbox.ru Его можно указывать как положительным, так и отрицательным. skillbox.ru Например: div { height: 200px; background: linear-gradient(45deg, red, blue); }. skillbox.ru
2. Использовать ключевые слова. html5book.ru doka.guide Для указания направления градиента используются ключевые слова с приставкой to: to left, to top, to right, to bottom (по умолчанию). doka.guide Значения имеют следующие эквиваленты в углах: doka.guide

• to top — 0deg; doka.guide
• to bottom — 180deg; doka.guide
• to right — 90deg; doka.guide
• to left — 270deg. doka.guide

Ключевые слова можно сочетать, чтобы направить градиент в нужный угол элемента. doka.guide Например: div { height: 200px; background: linear-gradient(to right top, red, blue); }. skillbox.ru